1

我试图通过css中的不透明度隐藏我的导航，然后让导航淡入页面下方约600px。

我的一切正常，除了....当我加载页面时，导航栏以完全不透明 (1) 开始。

一旦我向下滚动一个像素，它就可以正常工作。即导航不透明度返回到 (0)，然后在 600 像素时导航不透明度返回到 (1)。

如果有人可以帮助我解决这个问题，我将不胜感激。

这是一个小提琴http://jsfiddle.net/daugaard47/FpPTm/。

按运行然后向下滚动页面以查看效果。

如果您想快速检查一下，这是我的脚本。

        $(window).bind('scroll', 'load', function(){
        var                 
            navwrap = $('.navwrap'),
            scrollTop = $(document).scrollTop(),
            limit = 635;
       if (scrollTop >= limit) {
           navwrap.addClass('sticky');

       } else if (scrollTop <= limit) {
           navwrap.removeClass('sticky');              
       }
    });

如果有人可以帮助我，请提前感谢。

4

1 回答 1

1

It looks like as the nav has already got the class sticky added when the page first loads it is already applying opacity:1. And then when scrolling down 1px it then removes this.

Updated JSFIDDLE without the sticky class at loadup

<div class="navwrap">
    <div id="nav">NAVIGATION</div>
</div>

I'm not sure if you need the sticky class at loadup but removing it looks to do the job.

于 2013-04-13T10:20:24.133 回答