1

我开发了一个新网站(http://learning-happly.azurewebsites.net)。我尝试使用 Bootstrap 脚本(scrollspy、carousel、affix)来实现。但是,词缀在 Safari 和 Chrome 中无法正常工作:

我的页面是 - 标题 - 轮播 - #brands-menu(附加) - 登陆页面的内容为:

<body>
    <header>
        <!-- height : $(window).height() - $("#brands-menu").height() (before scripts) -->
        <section id="carousel">
        </section>

        <!-- height : 159px, to affix -->
        <div id="brands-menu">
            <div id="brands">
                … 
            </div>
            <nav id="menu">
                …
            </nav>
        </div> 
    </header>
    <section>
        … 
    </section>
    …
    <script>
        // make carousel
        $('#carousel').carousel();

        // scrollspy (159 is the height of affixed #brands-menu)
        $('#menu').scrollspy({ offset:159 });

        // to scroll to landing page items
        $('#brands-menu').scroll_navi();

        // affix brands and menu, when scroll hides #carousel
        $("#brands-menu").affix({ offset:{top:$("#carousel").height(), bottom:0}});
    </script>
</body>

结果: http: //learning-happly.azurewebsites.net

4

0 回答 0