特定视口的粘性部分

Question

例如我的文档高度是4100，我需要显示高度在500到3600之间的部分。我已经尽力使用以下代码。我没有得到正确的输出。请分享您的想法。

var start = $(document).scrollTop();
var stop = $(document).height() - 500;
$('#onScrollShow').hide();
$(window).scroll(function () {
  if (start < stop) {
      $('#onScrollShow').show();
  } else {
      $('#onScrollShow').hide();
  }
});

HTML:

<div id="onScrollShow"> some text </div>

Answer 1

您需要检查页面的位置 在您的滚动事件中，因此 jQuery 将在用户每次滚动时检查该值：

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop(); //gets value every scroll
    if (scroll < stop) {
        // do stuff
    }
});

Answer 2

这是有效的！

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop(); 
    if ((currentScroll > 400) && (currentScroll < 2500)) {
        $('#onScrollShow').slideDown();
    }else {
            $('#onScrollShow').slideUp();
        }
});

特定视口的粘性部分

Sticky section in particular view port

html

javascript

jquery

sticky

viewport