값이 비어 있으면 입력을 확인하십시오.

-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

값이 비어 있으면 입력을 확인하십시오.

답변

관련 문제