导航滚动插件偏移问题真的让我烦恼

时间:2014-08-05 11:36:38

标签: javascript jquery html css scroll

我有两个导航"平滑滚动"我的页面上的Javascript插件 - 其中一个是scrollTo插件,用于处理在点击时滚动到锚点/部分链接,另一个键盘导航滚动插件用于启用导航...你猜对了,键盘。

第一个插件工作正常,我在代码中设置了一个偏移量,以便它可以很好地滚动到每个部分,看起来非常好。另一方面键盘导航插件主要是有效,我还在代码中定义了一个偏移量,这个单独的插件可以滚动到我想要的每个部分 - 事实上它适用于每个部分当滚动到Works部分时之外的部分 - 当使用键盘滚动到导航部分和顶部部分之间时,有一个小但相当难看的间隙。它离它应该的位置非常接近,只是在那里没有夸大......而且它只是这一特定部分的一个问题。

用文字解释很难,所以首先要提到的是link ......

这是一个视觉参考,可以让我知道我的意思:

enter image description here

它显然是一个相对较小的问题,但它真的开始让我感到烦恼,因为如果不是这样的话,一切都会接近完美!

我不确定如何修复它,或者即使我可以......我无法更改插件代码中的偏移量,因为它会影响其他部分这很好 - 它只是滚动到有问题的工作部分。

你会认为我可以简单地增加/减少主标题的大小以匹配,但由于某种原因我无法使其工作 - 它似乎继续滚动到完全相同的位置。 / p>

这是插件的脚本,偏移量定义为-65:

/ * x09 - Scrollit.js键盘导航* /

(function(e){"use strict";var t="ScrollIt",n="1.0.3";var 

r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:-65};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t<0||t>s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")||e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&&(r==n.upKey||r==n.downKey)){return false}if(r==n.upKey&&i>0){o(parseInt(i)-1);return false}else if(r==n.downKey&&i<s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&&t&&i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t>=e(i).offset().top+n.topOffset&&t<e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)

遗憾的是,由于它使用[data]标签属性,因此我无法使用相关的类/ ID。

如果有任何其他相关代码我应该添加可能有用,请告诉我。非常感谢任何帮助解决这个问题!这是我在使用我的网站的新版本/版本之前需要做的最后一件事:)干杯。

0 个答案:

没有答案