当滚动到达某个点时使元素粘滞的麻烦

问题描述：

我遇到了麻烦，应该是一件简单的事情。我有一个特殊的div，当它滚动到某个点时，我想使它变得粘稠（固定）。但它不起作用。我的条件让它变得粘稠似乎从来没有得到满足。事实上，无论我滚动多少，我追踪的偏移量都不会改变。任何人都可以提供建议吗？当滚动到达某个点时使元素粘滞的麻烦

HTML：

<navbar> 
     <a href="http://www.post-gazette.com/"><pglogo>&nbsp;</pglogo></a> 

     <textbranding>title</textbranding> 

     <social> 
      <a class="fa fa-facebook" target="_blank" href=""></a> 
      <a class="fa fa-twitter" target="_blank" href=""></a> 
     </social> 
    </navbar> 

    <section class="module parallax parallax-1"> 

     <h2>Title</h2> 
     <h3>teaser</h3> 

    </section> 


    <wrapper> 
<div id="chapters" style="text-align: center;"> 
    <div class="linkChapter">main story</div> <div class="linkChapter">chapter 2</div> <div class="linkChapter">chapter 3</div><div class="linkChapter">chapter 4</div> <div class="linkChapter">chapter 5</div> 
</div> 

    <section id="story-start" class="row medium-9 large-7 columns storyMain"> 

    (lots of text) 
</section> 
    </wrapper>

的jQuery：

var $window = $(window), 
     $stickyEl = $('wrapper'), 
     elTop = $stickyEl.offset().top; 
     offset = elTop - $(document).scrollTop(); 
     //elTop - $(window).scrollTop() 
     console.log(elTop); 

    $window.scroll(function() { 
     console.log(elTop-$(window).offset().top); 
     if (elTop <= 40) { 
      $('#chapters').addClass('sticky'); 
     } else { 
      $('#chapters').removeClass('sticky'); 
     } 

     //$stickyEl.toggleClass('sticky', elTop <= 40); 
    });

CSS

navbar { 
    width: 100vw; 
    height: 50px; 
    background: linear-gradient(rgb(0, 0, 0),rgba(0, 0, 0, 0.75)); 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-content: center; 
    align-items: center; 
    padding: 0 10px; 
    position: fixed; 
    z-index: 3000; 
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 
} 
wrapper { 
    transition: background 2.0s ease; 
    display: block; 
    position: relative; 
} 

wrapper p { 
    transition: all 2.0s ease; 
} 
section.module.parallax { 
    height: 1200px; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
} 
section.module.parallax-1 { 
    background-image: url("../img/main/myimage.jpg"); 
    position: relative; 
} 
#chapters { 
    margin-bottom: 30px; 
    position: absolute; 
    width: 100%; 
    top: -30px; 
} 
#chapters.sticky { 
    position: fixed; 
    top: 50px; 
    } 
.linkChapter { 
    cursor: pointer; 
    background-color: black; 
    color:white; 
    padding: 3px 7px; 
    display:inline-block; 
} 
.linkChapter:hover { 
    opacity: .7; 
}

答

我已简单，codepen上传它。这将解决您的问题。我也对CSS做了细微的改动，但是你可以忽略它们并专注于它的jQuery部分。

codepen：https://codepen.io/vikrant-icd/pen/GEQdxZ

的jQuery：

$(window).scroll(function() { 
    var elTop = $("wrapper").position(), 
    window = $("body").scrollTop(), 
    wrapTop = elTop.top - 80; 

    if (window >= wrapTop) { 
    $("#chapters").addClass("sticky"); 
    console.log("sticky"); 
    } else { 
    $("#chapters").removeClass("sticky"); 
    } 
});

答

我最终什么事不得不做的是将代码我的索引页上 - 不理想的情况。但代码如下所示：

$(function() { 
    $(window).scroll(function() { 

        if ($(window).width() > 768) { 
         if ($(this).scrollTop() > 1150) { 
          $('#chapters').addClass('sticky'); 

         } else { 
          $('#chapters').removeClass('sticky'); 
         } 
        } 


     }); 
    });

当滚动到达某个点时使元素粘滞的麻烦

相关推荐