Turning the missing element into the page. How do you get jQuery?



  • Good afternoon!

    Please indicate how to put on the website the device for the introduction of the element when the screen is screened, the element moves on the horizontal axis (with the right to the left or vice versa), depending on the screen stack up or down, using the visibility style. This mechanism is implemented on the website: mhmgroup.ae There's a similar code, but it'll just show up 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 you!



  • If you understand correctly, you need one of those options:

    <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 &gt; 200 ? 'In' : 'Out')](500);
        element.css('marginLeft', move);
    });
    

    </script>

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


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2