1

我的标题设置为 920px 居中的宽度，并且使用标题下方的代码变得固定并在用户滚动时改变不透明度。我很容易达到了我想要的效果，尽管变化发生在瞬间。我想知道我是否可以使更改逐渐消失？我试过使用 CSS3 过渡但没有运气。

      <script>
  $(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('header').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 


            $('header').css({ 'position': 'fixed', 'position': 'fixed', 'opacity':0.8,  'top':0, 'left':0 });

        } else {
            $('header').css({ 'position': 'relative' }); 
        }   

    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
  </script>

谢谢。

4

1 回答 1

0

您可以将样式放入 2 个单独的类中并使用 jQuery UI 的switchClass()

switchClass（删除，添加，[持续时间]）

使用可选的转换从第一个参数中定义的类切换到定义为第二个参数的类。

添加一些样式类：

style1{
    position: fixed;
    opacity: 0.8;
    top: 0;
    left: 0;
}

style2{
    position: relative;
}

在它们之间切换：

if (scroll_top > sticky_navigation_offset_top) {
    $('header').switchClass("style2", "style1", 300);
} else {
    $('header').switchClass("style1", "style2", 300);
}​

或者，您可以进一步研究 CSS3 转换。我自己还没有使用过它们，但它们可能能够达到您的需要。

于 2012-09-17T23:46:09.060 回答