Question

我需要制作一个菜单栏 http://showbic.com/sports/adam-milne-vs-west-indies/

在这个网站中，menu_bar不在顶部，但是当你向下滚动时，菜单栏上的内容不会与其他内容相符，但触摸顶部后它会保持在顶部。

我知道有些JavaScript与CSS结合使用，但我怎么不知道，请有人帮帮我。

先谢谢你。

Answer 1

我建议在Javascript中使用onscroll尝试一些内容，然后将标题保持在顶部，您可以在容器的CSS中使用position:fixed;。（你可能想要使用顶部位置或其他东西来保持它位于顶部，并且在顶部不需要时在你喜欢的位置）

参见例如：

<script type="text/javascript">
var fixed = false;

onscroll = function() 
{
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 200) 
    {
        if (!fixed) 
        {
            $('.navbar-wrapper').css({ position: 'fixed', top : 0 });
            fixed = true;
            }
    } 
    else 
    {
        if (fixed)  
        {
            $('.navbar-wrapper').css({ position: 'relative', top : 200 });
              fixed = false;
        }
    }
}
</script>

Answer 2

在查看源代码时，您可以查看控制此栏的javascript部分。 http://showbic.com/wp-content/plugins/seo-alrp/js/slidebox.js?ver=3.8。而不是：

$('#alrp-slidebox').animate({'right':'0px'},300);

把：

$('#yourContent').animate({'top':'0px'},300);

对于（我们假设盒子的高度为300px）：

$('#alrp-slidebox').stop(true).animate({'right':'-430px'},100);

把：

$('#yourContent').stop(true).animate({'top':'-300px'},100);

Answer 3

这可以是您的css

body{
    height:1000px;
}

div{
width:200px;
    height:100px;
    background:red;
    position:relative;
    top:200px;
}

.fixedClass{
position:fixed;
top:0;
}

jquery代码

$(window).scroll(function(){
if($(window).scrollTop() > 200){ // position of menu from the top 
$('div').addClass('fixedClass');
}
else{
$('div').removeClass('fixedClass');
}
})

Html：P

<div>
</div>

工作fiddle

菜单栏不在顶部，但是一旦向下滑动菜单栏就会粘到顶部

3 个答案: