300px 스크롤 한 후에 만 ​​보이는 요소

Question

코딩에 대한 기본 지식 만 알고 있으며, 여기서 막 다른 골목에 섰습니다. 몇 픽셀 후에 스크롤 할 때만 볼 수 있도록하는 방법에 대한 간단한 코드가 있습니까?

당신은 내가 http://cocorrinanewtemplate.blogspot.gr 고정되어 회색 반 바 (메인 메뉴가 더 이상 볼 때이 없습니다) 300 픽셀을 스크롤하는 경우에만 볼 수를 사용하는

Answer 1

이 작업을 시도 할 수 있습니다.

HTML

<a href="javascript: void(0)" class="back-to-top"></a> 

CSS

.back-to-top {display: none; width: 30px; height: 30px; position: fixed; bottom: 20px; right: 20px; z-index: 500;} 

자바 스크립트의

$(function(){ 
     $(window).scroll(function(e) { 
      if($(this).scrollTop()>150){ 
       $('.back-to-top').fadeIn(1000); // Fading in the button on scroll after 150px 
      } 
      else{ 
       $('.back-to-top').fadeOut(500); // Fading out the button on scroll if less than 150px 
      } 
     }); 

     $('.back-to-top').click(function(e) { 
      $('body, html').animate({scrollTop:0}, 800); 
     }); 
    }); 

Answer 2

당신의 하세을 메뉴가 있어야 여기 무슨 뜻인지 볼 수 있습니다 jQuery 함수 .scroll()

어디서 왔는지 계산해야하고, 위로부터 300px에있을 때 논리를 계산해야합니다.

Answer 3

나는이 스크립트는 당신을 위해 작동 할 수 믿습니다

<script type="text/javascript"> 
       $(document).ready(function(){ 

       $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
         $('.classid').fadeIn(); 
        } else { 
         $('.classid').fadeOut(); 
        } 
       }); 
    </script> 

이에 문제가 깜박이는 바로이 스크립트를 제거하고 당신이 잘 될 것입니다 :

<script type='text/javascript'>                    

$(function(){ 
     $(window).scroll(function(e) { 
      if($(this).scrollTop()>200){ 
       $('#menutest').fadeIn(1000); // Fading in the button on scroll after 150px 
      } 
      else{ 
       $('#menutest').fadeOut(500); // Fading out the button on scroll if less than 150px 
      } 
     }); 


    }); 

</script>