向下滚动时修复div顶部？

Question

我尝试修复上面：滚动后，ID为“粘”的div，但没有工作，ithink java脚本代码是问题。 有人可以帮助我做到这一点。

function sticky_relocate() { 
 
    var window_top = $(window).scrollTop(); 
 
    var div_top = $('#sticky-anchor').offset().top; 
 
    if (window_top > div_top) { 
 
    $('#sticky').addClass('stick'); 
 
    $('#sticky-anchor').height($('#sticky').outerHeight()); 
 
    } else { 
 
    $('#sticky').removeClass('stick'); 
 
    $('#sticky-anchor').height(0); 
 
    } 
 
} 
 
    
 
$(function() { 
 
    $(window).scroll(sticky_relocate); 
 
    sticky_relocate(); 
 
});

#sticky { 
 
    background-color: red; 
 
    height:140px; 
 
    z-index: 1; 
 
} 
 
    
 
#sticky.stick { 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sticky-anchor"></div> 
 
<div id="sticky"> 
 
    <ul class="menu"> 
 
    <li><a href="#">Nos Produits</a></li> 
 
    </ul> <!-- ul end .menu --> 
 
</div>

Answer 1

您需要包括jQuery：

function sticky_relocate() { 
 
    var window_top = $(window).scrollTop(); 
 
    var div_top = $('#sticky-anchor').offset().top; 
 
    if (window_top > div_top) { 
 
    $('#sticky').addClass('stick'); 
 
    $('#sticky-anchor').height($('#sticky').outerHeight()); 
 
    } else { 
 
    $('#sticky').removeClass('stick'); 
 
    $('#sticky-anchor').height(0); 
 
    } 
 
} 
 

 
$(function() { 
 
    $(window).scroll(sticky_relocate); 
 
    sticky_relocate(); 
 
});

body { 
 
height: 2000px; 
 
background: grey; 
 
} 
 

 
#sticky { 
 
    background-color: red; 
 
    height: 140px; 
 
    z-index: 1; 
 
} 
 

 
#sticky.stick { 
 
    position: fixed; 
 
    top: 0; 
 
/* added for demo */ 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sticky-anchor"></div> 
 
<div id="sticky"> 
 
    <ul class="menu"> 
 
    <li><a href="#">Nos Produits</a></li> 
 
    </ul> 
 
    <!-- ul end .menu --> 
 
</div>

Answer 2

您可以通过使用jQuery和JQuery的磁铁插件实现这一目标。 https://github.com/jtannous/JQuery-Magnet

$(".fix-me-to-top-after-scroll").magnet();

<div class="fix-me-to-top-after-scroll">CONTENT HERE</div>