Question

我使用以下代码创建了简单的粘性导航。问题是，当我向下滚动到导航变得粘滞的那一点时，窗口会自动下垂到浏览器的顶部。所以我不能进一步向下滚动。我发现它在第一页有效，但在其他页面中没有。然后我发现，如果页面高度> 900px，粘性导航工作正常。这是一个奇怪的问题....编辑js代码我删除了其他语句，我可以向下滚动，导航变粘，但正如你所知，滚动回来时它不会回到相同的位置。我无法弄清问题在哪里。

HTML
  <header>
<nav>

<div id="navigation">
    <ul class="clearfix">
        <li><a title="Sākums" style="padding-right: 5%;" href="<?php echo base_url()."homepage"?>">Sākums</a></li>

        <li><a title="Pakalpojumi" style="padding-right: 15%;" href="<?php echo base_url()."services"?>">Pakalpojumi</a></li>

        <li>style="top:0;"><a class="link" title="Sākums"href="<?php echo base_url()."homepage"?>">
            <img src="logo.png" alt="Logo"></a></li>

        <li><a title="Projekti" href="<?php echo base_url()."projects"?>">Projekti</a></li>

        <li><a title="Kontakti" href="<?php echo base_url()."contacts"?>">Kontakti</a></li>
    </ul>
</div>
</nav>
</header>

<div id="wrapper" class="clearfix">
<p>All kindz of content</p>
</div>

CSS

nav
{
    width: 100%;
    margin-bottom: 40px;
    margin-top: 10px;
    background-color: white;
    z-index:9999;
}

#navigation
{
width: 67%;
margin: 0px auto;
position: relative;
min-width:665px;
}
nav li
{
float:left;
list-style: none;
color:black;
display: inline;
width:20%;
min-width:130px;
position: relative;
top: 118px;
text-align: center;
font-size: 111%;
}

nav img
{
width: 120px;
height: auto;
}

和包装

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -68px; /* the bottom margin is the negative value of the footer's   height */
    width: 60%;
    max-width: 1200px;
}

的Javascript

  var navoffset = $('nav').offset().top;
    navoffset = navoffset+120; //scroll to bottom of logo.
            $(window).scroll(function(){
                    if( $(window).scrollTop() > navoffset ) {

                $('nav').css({position: 'fixed' , top: '-125px'});  
                   //show only bottom of logo 

                    }else
                {
                 $('nav').css({position: 'relative' , top: '0px'});   

                }
            });

粘性导航无法正常工作

0 个答案: