【问题标题】:How do I offset my auto scroll?如何抵消我的自动滚动?
【发布时间】:2017-03-07 21:04:47
【问题描述】:

每当我的自动滚动功能从一个 div 转换到另一个时,我需要将其偏移大约 50-100 像素。

下面的脚本是我正在使用的。当我点击一个链接时,它会平滑地将我向下滚动到相关 Div 的顶部。

但是我的网站顶部有一个粘性标题,所以它总是涵盖您转换到的 div。

无论如何我可以将过渡设置为转到 div 的顶部,然后将其偏移 -100px?

我的代码如下。

   $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
      e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
 });

【问题讨论】:

  • 你可能指的是设置z-index:-100px
  • 不完全。我的意思是当我单击一个链接并且页面滚动到所选 div 的顶部时,它不应该完全滚动到 div 的顶部,而是滚动到 100px 以上。原因是我有一个高度为 100 像素的粘性标题。这个粘性标题应始终显示,因此更改 Z-index 不是我所追求的。我宁愿自动滚动在每个 div 上方 100 像素处停止,这样当您滚动到它时标题不会覆盖它。
  • 检查答案...

标签: jquery scroll autoscroll


【解决方案1】:

好的,从您的评论来看,您可以尝试以下方法:

$('html, body').stop().animate({
        'scrollTop': ($target.offset().top - 100) // 100 is hard coded though you can make it dynamic if you know identifier of your sticky div like so: ($target.offset().top - $("#sticky-div").outerHeight())
    }, 900, 'swing', function () {
        window.location.hash = target;
});

【讨论】:

  • 非常感谢!没想到这么简单。
猜你喜欢
  • 1970-01-01
  • 2010-11-17
  • 1970-01-01
  • 1970-01-01
  • 2010-10-23
  • 1970-01-01
  • 1970-01-01
  • 2019-09-28
  • 2022-01-20
相关资源
最近更新 更多