値が空であれば入力を確認する

-1

B要素のスクロールページの下にスティッキーメニューが表示されても入力フォームとスティッキーメニューが表示されますが、入力が空でないかどうかチェックしたい場合は、どうやってするか？値が空であれば入力を確認する

私の構造

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; 
}

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

出典

2016-09-02 ani_css

CodePenはここのコードと一致していないようです - 入力値を確認するための入力とスクリプトが欠落しています（スキミングを素早く見て） –

@GeoffJamesは正しいですが、CodePenは更新されていません。手動で入力をHTMLに追加してから、これを解決するためにjQueryを編集する必要がありました。次回は注意してください。 –

これは、このコードは入力が空の場合、あまりにもチェックし、それが空の場合は、あなたに粘着性のバーが表示されます、本当に簡単です。

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

注：「ここの人々は、あなたがあなたの問題を解決するために起こっているが、彼らが上がらないので、私は、あなたが物事のこの種を解決するために、論理とjQueryについてのコースを受講することをお勧めしますちなみにあなたのためにそれを普通に書くつもりはありません。そこには本当に良いコースがあり、時間がかかります。このような問題を簡単に解決することができます。）

出典

2016-09-02 21:39:30

値が空であれば入力を確認する

答えて

関連する問題