jquery - jQuery为元素添加底部边框

Question

bottom border当用户在某个点之后滚动时，我正在尝试将 a 添加到元素中。由于某种原因，这个脚本什么也没做。代码如下：

$(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

• 您忘记在 上添加 appostrovs/quotes border-bottom，或者您可以使用borderBottom
• $(function(){它的快捷方式$(document).ready(function(){，所以不要将它用作包装器
• 您可以使用 if/else as ( 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' });