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

Question

我有一个网站，它使用不同的页面模板并调用 jquery 将网站 header 固定在滚动超过一定数量的像素时。这个粘性 class 在带有固定横幅的页面模板上完美运行，但在我没有包含横幅的页面模板上，我想更改调用滚动功能的位置。例如，以 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) 创建第二个 header div class (.site-header-2) 和一个额外的 jquery 文档，它只影响那个 class。

第二个我可以做，尽管如果我要创建多个页面模板，所有页面模板都具有不同的固定滚动高度，那么它会不那么优雅和耗时。

使用上面脚本中的语法，是否有一个简单的解决方案来使用条件参数，根据页面 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>

但理想情况下，您不必关心硬编码值，例如“500”。当滚动条经过时，您可能想让 header 变粘，对吧？在那种情况下，您可以将 threshold 动态设置为 $('site-header').offset().top 之类的东西。

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

Can I modify Jquery to use conditional statements based on which URL is returned?

javascript

jquery

sticky