Question

现在，右侧的div始终跟随滚动。如果我希望它在页面滚动到div的顶部时开始跟随滚动，并使其在向上滚动时保持在那里，我还需要做什么？

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
        $('.mSidebar').css( "top", scrollTop + 400 );
    console.log(scrollTop);
});

Answer 1

像这样使用：

$(document).ready(function(){

    $(window).scroll(function(){

        if($(document).scrollTop() > 400) {
            var newPos = $(document).scrollTop() + 400 ;
            $('.mSidebar').css( {top:newPos});
        }

        else {
            $('.mSidebar').css( {top:400});
        }
    })
})

Answer 2

当您想要贴在顶部（或底部）时，请使用position: fixed。

    //you can do it in initial layout, no need to set up css in js
    $('.mSidebar').css( "position", 'fixed');


    //if user scrolled down more then 400 px we make div to stick to the top
    if (scrollTop>400) {
        $('.mSidebar').css( "top", 0);
    } else {
        //otherwise it stays in the middle of the screen
        $('.mSidebar').css( "top", '400px');
    }

https://jsfiddle.net/4zreh4ek/6/

Answer 3

您使用position：当滚动到达您选择的位置时固定。这是由滚动事件触发的。

BUT！确保div在返回＆lt; 400滚动时重置。这是我编写的一个例子。

希望这有帮助！

$(window).scroll(function() {
	var scroll = $(window).scrollTop();
	if (scroll > 400) {
  	$('.mSidebar').css("position", "fixed");
    $('.mSidebar').css("top", 5);
  } else {
  	$('.mSidebar').css("position", "absolute");
    $('.mSidebar').css("top", 400);
  }
});

.mSidebar {
  height: 300px;
  width: 200px;
  background-color: black;
  position: absolute;
  top: 400px;
  right: 20px;
}

body {
  width: 1000px;
  height: 10000px;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="mSidebar"></div>
</body>

在某些滚动后使侧面div跟随

3 个答案: