我开发了一个新网站(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