Question

我有输入表单和粘性菜单，每当滚动页面底部的B元素我的粘性菜单出现但我想检查我的输入是否为空而不是显示如果不是没有理由是apper怎么做？

我的结构

HTML

<html>
    <head>

    </head>
    <body>

        <ul class="sticky">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="container">
            <input type="text" class="input" value="">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>

    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <body>
</html>

CSS

.container {
    width:1020px;
    margin:0 auto;
}
.container>div{
        width:100%;
        height:300px;
        background:#f0f0f0;
        border:1px solid #ccc;
        margin:100px 0;
    }
.a:after{
    content:"A";
    font-size:250px;
    text-align:center;
    line-height:300px;
    display:block;
    color:#999;
}
.b:after{
    content:"B";
    font-size:250px;
    text-align:center;
    line-height:300px;
    display:block;
    color:#999;
}
.c:after{
    content:"C";
    font-size:250px;
    text-align:center;
    line-height:300px;
    display:block;
    color:#999;
}
ul.sticky{
    list-style-type:none;
    padding:0;
    margin:0;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#f0f0f0;
    height:50px;
    border-bottom:5px solid #ccc;
    display:none;
}
ul.sticky:after,ul.sticky:before{
    content:"";
    display:table;
    clear:both;
}
ul.sticky li a{
    display:block;
    float:left;
    line-height:50px;
    padding:0 30px;
    text-decoration:none;
    color:#999;
}
ul.sticky li a:hover{
    background:#999;
    color:#f0f0f0;
}

JS

  $(function() {
         $(window).scroll(function() {
    if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
            $(".sticky").show();
        }else{
            $(".sticky").hide();
        }
    });

});

我的结构我添加了这样的输入控件;

$(function() {
    var input = $("input").val();
    if(input==""){
     $(window).scroll(function() {
    if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
            $(".sticky").show();
        }else{
            $(".sticky").hide();
        }
    });

}
});

但没有工作。

click to see demo

Answer 1

这很简单，这段代码会检查输入是否为空，如果它是空的，则会显示粘滞条。

$(function() {
    $(window).scroll(function() {
    if($(window).scrollTop() > $(".b").offset().top+$(".b").height() && $("input").val() == ""){
            $(".sticky").show();
        }else{
            $(".sticky").hide();
        }
    });
});

注意：顺便提一下，我建议你参加一个关于逻辑和jQuery的课程来解决这类问题，因为这里的人们会帮你解决问题，但他们不是通常不会为你写下来。有很好的课程，花一些时间，你将能够轻松解决这类问题。保持我知道你可以做的好工作;）

如果出现值为空，则检查输入

1 个答案: