jQuery 为元素添加底部边框

Question

当用户滚动到某个点后，我尝试向元素添加底部边框。由于某种原因，这个脚本什么也没做。代码如下:

$(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") });
    });
});