Good day!

Please tell me how to implement on the website the mechanism for the appearance of an element when scrolling the screen - the element moves along the horizontal axis (from right to left, or vice versa), depending on the screen scrolling up or down, using the visibility style. This mechanism is implemented on the website: mhmgroup.ae There is a similar code, but the element in it will just appear and disappear, but I can’t find a solution for the purpose I need:

jQuery(function(f) { var element = f('#back-top'); f(window).scroll(function() { element['fade' + (f(this).scrollTop() > 200 ? 'In' : 'Out')](500); }); });

Thank !

  • Do you need the element to move horizontally a certain distance according to the scroll pitch? - Romanzhivo
  • @PeterSmith, good afternoon! that's right Maybe css-animation will suit me? - Artem
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

If you understand correctly, then you need this option:

 <style> body { margin: 10px; } .wrapper { width: 100%; height: 100%; } .scrolled-block { height: 3000px; } .moved-element { display: none; position: fixed; bottom: 20px; width: 50px; height: 20px; background-color: #323232; } </style> <div class="wrapper"> <div class="scrolled-block"></div> <div class="moved-element"></div> </div> <script type="text/javascript"> var element = $('.moved-element'); var elementWidth = element.width(); var body = $('body'); var bodyHeight = body.outerHeight(true); var scrolledBlock = $('.scrolled-block'); var sbWidth = scrolledBlock.width(); var winHeight = $(window).height(); var maxScroll = bodyHeight - winHeight; var coeff = maxScroll/(sbWidth-elementWidth); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var move = scrollTop / coeff; element['fade' + (scrollTop > 200 ? 'In' : 'Out')](500); element.css('marginLeft', move); }); </script>

https://jsfiddle.net/Romanzhivo/ntnhd3v5/7/

  • Many thanks for your efforts. I'm trying to make a website for myself, I practically have no programming skills. I will try, so far, that the element (picture) hangs in place (there is no movement to the right), but disappears as you scroll down the page. - Artem