Question

我正在尝试在滚动时处理div同步。基本上，我只有两个div，我想控制为页面滚动，并在它到达顶部时修复第二个div。请检查附带的gif图标。

到目前为止，您还可以check我的进展。

我的代码中的问题是：一旦我滚动页面，两个div都会到达顶部。

我过去常常使用的jquery：

jQuery(document).on('ready', function() {
    "use strict";
    /* -------------------------------------
            Set Page Height
    -------------------------------------- */
    function headerFullScreen() {
        var _vph = jQuery(window).height();
        jQuery('#header').css({'height': _vph + 'px'});
    }
    function imgBoxFullscreen() {
        var _vph = jQuery(window).height();
        jQuery('#imgbox').css({'height': _vph + 'px'});
        jQuery(window).scroll(function(){
            if(jQuery(window).scrollTop() >= _vph - 68){
                jQuery('.navigationarea').addClass('ontop');
            }
        })
    }
    window.onresize = function() {
        headerFullScreen();
        imgBoxFullscreen();
    }
    var refreshId = setInterval(refresh, 500);
    function refresh() {
        headerFullScreen();
        imgBoxFullscreen();
    }
    /* -------------------------------------
            FIXED LOGO AND NAV
    -------------------------------------- */
    jQuery(window).scroll(function(){
        var scrollTop = 1;
        if(jQuery(window).scrollTop() >= scrollTop){
            jQuery('.logoholder, .navigationarea').css({
                position : 'fixed',
                top : '0',
                margin : '0'
            });

            jQuery('.navigationarea').addClass('ontop-mobile');
            jQuery('.navigationarea').addClass('ontop');
            jQuery('.menu_lis').addClass('top_menu');
            jQuery('.straight-menu').addClass('hide_bottom_menu');


        }else{
                    jQuery('.navigationarea').removeClass('ontop-mobile');
                    jQuery('.navigationarea').removeClass('ontop');
                    jQuery('.menu_lis').removeClass('top_menu');
                    jQuery('.straight-menu').removeClass('hide_bottom_menu');

        }
        if(jQuery(window).scrollTop() < scrollTop){
            jQuery('.logoholder').removeAttr('style');
            jQuery('.navigationarea').removeClass('ontop-mobile');
            jQuery('.navigationarea').removeClass('ontop');
            jQuery('.navigationarea').removeAttr('style');
        }
    })
});

我还附上了gif来展示它是如何工作的。有任何帮助吗？

Answer 1

希望这会有所帮助。

脚本的简化版本

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  if (scrollTop > 0) {
    $(".logo,.menu").css({
      position: 'fixed',
      top: '0',
      margin: '0'
    });
  } else {
    $(".logo,.menu").removeAttr('style');
  }
});

https://jsfiddle.net/j3no7uy5/

Answer 2

我相信丹只是在他的事故答案中留下了一些细节。您需要将div从页面顶部的初始偏移量与您滚动的数量进行比较。

如果滚动距离大于初始偏移量，则将其设为粘性。否则，您将其恢复为原始样式。

您可以使用jQuery＆＃39; .css()进行样式设置，如下所示，或者您可以切换类，或两者兼而有之。这对你有用。

示例：

＆＃13;

$(function() {
  var targetDiv = $('#section1').find('.section-container');
  var sec1offset = targetDiv.offset().top;

  $(document).scroll(function() {

    var distY = $(document).scrollTop();

    if (sec1offset <= distY) {
      $(targetDiv).css({
        position: 'fixed',
        top: '0',
        left: '10vw',
        zIndex: '0'
      });
    } else {
      $(targetDiv).css({
        position: '',
        top: '',
        left: '',
        zIndex: ''
      });
    }
  });

});

＆＃13;

#section0 {
  background-color: midnightblue;
  width: 100%;
  height: 60vh;
}

#section1 {
  background-color: gold;
  width: 100%;
  height: 60vh;
}

#section1 .section-container {
  width: 80%;
  height: 30vh;
  position: relative;
  top: 20vh;
  left: 10vw;
  background-color: firebrick;
}

#section2 {
  background-color: midnightblue;
  width: 100%;
  height: 100vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section0"></section>
<section id="section1">
  <div class="section-container"></div>
</section>
<section id="section2"></section>

＆＃13;

如何在滚动时同步div？

2 个答案: