Question

我正在为WordPress网站的不同页面编写相同的代码三次。我觉得它可以写得更优雅但不幸的是我还没达到技能水平。有没有办法将所有这些结合起来更简洁？它也可能帮助我更多地了解使用JavaScript可以做什么和不可以做什么。

if (jQuery(document.body).hasClass("home")) {

    jQuery(window).scroll(function () {
        var threshold = 654;
    if (jQuery(window).scrollTop() >= 654)
        jQuery('#sidebar').addClass('fixed');
    else
        jQuery('#sidebar').removeClass('fixed');
    });

} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {

    jQuery(window).scroll(function () {
        var threshold = 20;
    if (jQuery(window).scrollTop() >= 20)
        jQuery('#sidebar').addClass('fixed');
    else
        jQuery('#sidebar').removeClass('fixed');
    });

} else {

    jQuery(window).scroll(function () {
        var threshold = 236;
    if (jQuery(window).scrollTop() >= 236)
        jQuery('#sidebar').addClass('fixed');
    else
        jQuery('#sidebar').removeClass('fixed');
    });
}

Answer 1

var threshold = 236;
if (jQuery(document.body).hasClass("home")) {
   threshold = 654;
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
   threshold = 20;
}

var scrolled = false;
jQuery(window).scroll(function () {  
    if (!scrolled && jQuery(window).scrollTop() >= threshold){
        jQuery('#sidebar').addClass('fixed');
        scrolled = true;
    } else if (scrolled && jQuery(window).scrollTop() < threshold) { 
        jQuery('#sidebar').removeClass('fixed');
        scrolled = false;
    }
});

更新：我创建了一个简单的演示程序来演示如何在其父级中实现侧边栏滚动。
Demo on CodePen

Answer 2

该死的......我被击败了。好吧，我还是会发布这个。

var scrollTopFn = function(amount){
  $(window).scroll(function(){
    // this is a ternary statement, basically a shorthand for writing if else statements
    $(window).scrollTop() >= amount 
      ? $('#sidebar').addClass('fixed')
      :  $('#sidebar').removeClass('fixed');
  });
}

if ($(document.body).hasClass('home')) {
  scrollTopFn(654);
} else if ($(document.body).hasClass('single')){
  scrollTopFn(20);
} else {
  scrollTopFn(236);
}

Answer 3

您的代码可以简化为：

var $body = jQuery(document.body),
    threshold = $body.hasClass("home") ? 654
                    : $body.hasClass("single") || $body.hasClass("page") ? 20
                        : 236;
jQuery(window).on('scroll', function() {
        jQuery('#sidebar').toggleClass('fixed', state);
});

但是这个应该有更好的表现：

var $body = jQuery(document.body),
    state = false,
    threshold = $body.hasClass("home") ? 654
                    : $body.hasClass("single") || $body.hasClass("page") ? 20
                        : 236;
jQuery(window).on('scroll', function() {
    if(state != (state = jQuery(window).scrollTop() >= threshold))
        jQuery('#sidebar').toggleClass('fixed', state);
});

Answer 4

可能是：

var threshold = 236;

switch (jQuery(document.body).attr("class")) {
    case "home":
        threshold = 654
        break;
    case "single":
    case "page":
        threshold = 20
        break;

}

$(window).scroll(function () {
    if (jQuery(window).scrollTop() >= threshold )
        jQuery('#sidebar').addClass('fixed');
    else
        jQuery('#sidebar').removeClass('fixed');
});

如何更优雅地编写此代码？

4 个答案: