Question

我遇到了粘性javascript函数的问题，它允许固定div的定位。

这是功能：

$(function(){ // document ready
  if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
    var stickyTop = $('.sticky').offset().top; // returns number 
    $(window).scroll(function() { // scroll event
      var windowTop = $(window).scrollTop(); // returns number 
      if (stickyTop < windowTop) {
    $('.sticky').css({ position: 'fixed', width: 'inherit', top: 10 });
      } else {
    $('.sticky').css('position','static');
      }
    });
  }
});

但我需要这只发生在父div内，而不是整个页面。这是一个例子：

http://www.astroprodavnica.com/59/izrada-i-tumacenje-natalne-karte.html

右边是div。

Answer 1

家长position: relative应该static或position: absolute以外的其他用户，默认使用。

然后，要在此父级中定位，孩子应该body, html { max-width: 100%; overflow-x: hidden; } .logo, .black-bg { display: flex; min-height: 100vh; min-width: 100vw; position: fixed; justify-content: center; align-items: center; font-size: 50px; } .logo { z-index: 1; background: white; animation: animateLogo 2s ease-in-out 1.3s forwards; } .black-bg { background: black; z-index: 2; transform: translateX(100vw); animation: animateBlackBg 1.5s ease-in-out 1.5s forwards; } .content { display: flex; flex-direction: row; height: 100vh; width: 100%; } .content img { flex: 1; padding: 20px; } @keyframes animateLogo { 80% { transform: translateX(-100vw); opacity: 1; } 100% { transform: translateX(-100vw); opacity: 0; } } @keyframes animateBlackBg { 40% { transform: translateX(0); opacity: 1; } 80% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }。

您可以阅读有关定位的更多信息，例如here

Answer 2

当你使用固定位置时，你需要使用（相对父位置不适用于固定的孩子）

if (windowTop > stickyTop 
  && windowTop < $('.right').offset().top + $('.right').outerHeight(true)) {
    $('.sticky').css({ position: 'fixed', width: 'inherit', top: 10 });
  }else if(windowTop < stickyTop ){
     $('.sticky').css('position','static');
  }else{
    $('.sticky').css('position','absolute').css('bottom', '0px');
  }

绝对定位，但只在div内

2 个答案: