Question

我有一个使用不同页面模板的网站，并调用jquery将网站标题粘贴到滚动超过一定数量的像素。这个粘性类在带有固定横幅的页面模板上完美地工作，但是在我没有包含横幅的那些我希望改变调用滚动函数的位置。例如，出现在250而不是500像素。

该脚本位于Wordpress网站上，使用_s和sass构建，引用如下：

$(window).scroll(function() {
   var sticky = $('.site-header'),
       scroll = $(window).scrollTop();

   if (scroll >= 500) sticky.addClass('sticky-header');

   else sticky.removeClass('sticky-header');    
});

我能想到的解决方案有两个：a）根据URL选择器创建一个条件语句来触发不同的滚动位置b）创建第二个头文件div类（.site-header-2）和另一个仅影响该文件的jquery文件类。

我能做的第二个，虽然如果我创建多个页面模板并且具有不同的固定滚动高度，它将不那么优雅和耗时。

使用上面脚本中的语法，是否有一个使用条件参数的简单解决方案，根据页面URL结构改变固定滚动位置或实现我不知道的其他方式？

Answer 1

检查您的横幅元素是否存在并相应地设置滚动起始点

// within document.ready
var isBannerPage = $('#bannerId').length;// adjust selector to fit actual
var scrollStart = isBannerPage ? 500 : 250;
//cache element outside event handler to avoid searching many times a second for same element
var sticky = $('.site-header');

$(window).scroll(function() {
  var  scroll = $(window).scrollTop();

   if (scroll >= scrollStart ) sticky.addClass('sticky-header');

   else sticky.removeClass('sticky-header');    
});

Answer 2

我认为解决这个问题最简单的方法就是使用带有不同类的条件语句，比如

var threshold = 0;
if ( $(.site-header).length > 0 ) 
{
     threshold = 500;
}
else threshold = <something else>

但理想情况下，你不应该关心硬编码的价值观，例如＆＃34; 500＆＃34;。当scrolltop经过它时你可能想让标题变粘，对吧？在这种情况下，您可以动态设置threshold，类似$('site-header').offset().top。

我可以修改Jquery以根据返回的URL使用条件语句吗？

2 个答案: