javascript - 如何实现这种 CSS/JS 效果？

Question

如何实现本网站的置顶图像，然后固定置顶导航栏效果？具体来说，顶部导航栏滚动顶部滑动图像插件的方式，然后变得固定。 http://www.creuna.se/

Answer 1

不确定我是否正确，但也许这可以帮助你：

http://api.jquery.com/show/

使用非常高的值，您可以实现图片进来很慢：

$(document).ready(function () {
    $("#nav").show(6000);
});

Answer 2

这是示例和链接如何实现您可能需要一个 JQuery 插件来创建这样的标题滑块

http://cssglobe.com/lab/easyslider1.7/01.html

在滚动条之后将导航栏粘贴在标题中：这是简单的代码片段和演示 HTML：

<div id="container">
    <div id="navwrap">NAV WRAP</div>
</div>

Javascript：

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); 
// set original position on load
$(window).scroll(fixDiv);

以上在 JsFiddle http://jsfiddle.net/5ADzD/1/的演示

参考帖子：滚动过去后将 Div 置于顶部 希望这会有所帮助。