Question

我为网站创建了一个包含2个功能的顶级菜单：

滚动底部固定导航栏
幻灯片切换导航栏

这是演示：JSBIN

但我有两个问题：

当页面位于顶部且菜单处于默认状态时，幻灯片切换效果很好

但是在将页面滚动到底部并单击导航栏下的箭头后，幻灯片切换不起作用

菜单包含2个div：

菜单：

<div id="menu" class="top-nav">
                <ul>
                    <li class="active"><a href="#home" class="scroll">home page</a></li> 
                    <li><a href="#about" class="scroll">home</a></li> 
                    <li><a href="#events" class="scroll">m</a></li> 
                    <li><a href="#home" class="scroll">dfsdfs</a></li>
                </ul>
        </div>

和div用于导航栏下的箭头键和行：

<div id="menu-footer">      
        <div style="background:none repeat scroll 0 0 #CD1D27;padding:7px 0;"></div>
        <div id="open-close-toggle" style="background:url(http://up.tractorfc.com/images/48714086549751927852.png) no-repeat;height:32px;background-position:center;"></div>
</div>

第二个问题在于菜单页脚

我认为有更好的方法可以将此代码替换为箭头键并在菜单向上滑动时显示红线

我将此脚本用于幻灯片菜单栏：

 <script>
        $('#open-close-toggle').click(function(){
        $('#menu').slideToggle(); 
        });
    </script>

Answer 1

HTML正在破坏它。这是一个工作版本，可以在页脚上切换一个类，使其位于页面顶部。 http://jsbin.com/widaq/2/edit

页脚菜单不会向上滑动

1 个答案: