Question

我试图在用户在某个点之后滚动时向元素添加bottom border。出于某种原因，这个脚本什么都不做。代码如下：

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

        if(posFromTop > 515){
            // if more than 200px from the top do something
            $(function(){
                $(".menu").css({ border-bottom: "2px solid #ff4141": });
            });
        } else {
            // otherwise do something else.
            $(function(){
                $(".menu").css({ 'border-bottom', 'none': });
            });
        }
    });
});

提前感谢您的帮助。

Answer 1

您忘了在border-bottom上添加appostrofs / quotes，或者您可以使用borderBottom
$(function(){ $(document).ready(function(){的快捷方式，因此不要将其用作包装
您可以使用if / else的简写作为( condition ? true : false ) ...或者您可以缓存元素以提高性能，如下所示：$menu = $('.menu')然后使用$menu.css(...

jQuery代码：

$(document).ready(function(){
    $(window).scroll(function(){
        var posFromTop = $(window).scrollTop();
        $(".menu").css({ 'border-bottom': (posFromTop>515 ? "2px solid #ff4141" : "none") });
    });
});

Answer 2

使用驼峰语法语法：

 $(".menu").css({ borderBottom: "2px solid #ff4141": });

或用引号括起属性：

$(".menu").css({ "border-bottom": "2px solid #ff4141": });

这条线错了：

$(".menu").css({ 'border-bottom', 'none': });

应该是：

$(".menu").css({ borderBottom : 'none' });

jQuery为元素添加底部边框

2 个答案: