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/

参考文章：Sticking Div to Top After Scrolling Past it 希望这有用。

我怎样才能实现这个CSS / JS效果？

2 个答案: