Question

我设置了我的粘性标题以弹出顶部固定位置，但我希望它设置为动画，以便在滚动时从顶部屏幕向下滑动到当前的顶部0位置。

我尝试添加过渡css但是由于＆＃34;正常＆＃34;它似乎滑到了位置。标题不在同一个位置开始。它有一个保证金添加到顶部所以我想这就是为什么动画显示它滑到前0位置。

$(window).scroll(function () {
    if( $(window).scrollTop() > $('.header').offset().top + 300 && !($('.header').hasClass('stickyheader'))){
    $('.header').addClass('stickyheader');
    } else if ($(window).scrollTop() == 0){
    $('.header').removeClass('stickyheader');
    }
});

http://jsfiddle.net/jc0807/euyLvesr/4/

由于

Answer 1

使用jquery为转换设置动画：

JS：

$(window).scroll(function () {
  if( $(window).scrollTop() > $('.header').offset().top + 300 && !($('.header').hasClass('stickyheader'))){
    $('.header').addClass('stickyheader').animate({"top":"0%"});
  } else if ($(window).scrollTop() == 0){
    $('.header').removeClass('stickyheader');
  }
});

CS：

.stickyheader{
   ...
   top: -100%;
   ...
}

JSFIDDLE

增加幻灯片时间：

UPDATED FIDDLE

修正了向上滚动后向下滑动

NEW FIDDLE

粘性割台从顶部滑入固定位置

1 个答案: