Problem mit dem Element klebrig machen, wenn die Rolle einen bestimmten Punkt erreicht

Question

Ich habe Probleme mit dem, was eine einfache Sache sein sollte. Ich habe ein bestimmtes div, und wenn es bis zu einem bestimmten Punkt scrollt, möchte ich es (fest) klebrig machen. Aber es funktioniert nicht. Meine Bedingungen, um es klebrig zu machen, scheinen nie erfüllt zu werden. Tatsächlich scheint der Versatz, den ich verfolge, sich nicht zu ändern, egal wie viel ich scrolle. Kann jemand bitte beraten?

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; 
} 

Answer 1

ich gemacht habe es einfach und hochgeladen es in codepen. Dies wird Ihr Problem lösen. Ich habe auch kleinere Änderungen am CSS vorgenommen, aber Sie können sie ignorieren und sich auf den JQuery-Teil konzentrieren.

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"); 
    } 
}); 

Answer 2

Was ich den Code auf meiner Index-Seite zu tun haben, am Ende war Putting - nicht die ideale Situation. Aber der Code sieht so aus:

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

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

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


     }); 
    });