Question

我的标题设置为920px的中心宽度，并使用标题下方的代码固定，并在用户滚动时更改不透明度。虽然变化瞬间发生，但我很容易实现了我想要的效果。我想知道我是否可以让改变消失到位？我尝试过使用CSS3 Transitions但没有运气。

      <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>

感谢。

Answer 1

您可以将样式分为两个单独的类，并使用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转换。我自己还没有使用它们，但它们可能能够实现你所需要的。

使用jQuery淡化/动画位置更改

1 个答案: