隐藏和显示html元素

时间：2018-05-02 21:17:21

标签： javascript jquery html

我正在使用wordpress网站。我是新手，这是迄今为止我所取得的成就。我试图隐藏并显示页面滚动上的内容，我尝试使用javascript进行操作。我不知道是否有更好的方法。从上到下滚动时此代码工作正常，但从下到上滚动不好。它会跳过内容。三江源

＆＃13;
＆＃13; 
<script type="text/javascript">
$(function() {
 $('#slide-twotitle').hide();
	$('#slide-threetitle').hide();
	$('#slide-fourtitle').hide();
	$('.slide-fivetitle').hide();

 $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 300) {
  $('#slide-onetitle').show();
 
 } else {
 $('#slide-onetitle').hide();
	 
 }
if (scroll > 300 && scroll <800 ) {
  $('#slide-twotitle').show();
 
 } else {
 $('#slide-twotitle').hide();
	 
 }	
	 if (scroll > 800 && scroll <1400 ) {
  $('#slide-threetitle').show();
 
 } else {
 $('#slide-threetitle').hide();
	 
 }
	  if (scroll > 1400 && scroll <2000 ) {
  $('#slide-fourtitle').show();
 
 } else {
 $('.slide-fourtitle').hide();
	 
 }
	  if (scroll > 2000 && scroll <2600 ) {
  $('.slide-fivetitle').show();
 
 } else {
 $('.slide-fivetitle').hide();
	 
 }
 });
})
</script>
＆＃13; 
<a href="#one" class="hash"  id="slide-one"></a>
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/PlatoonTexture.jpg"></div>
      <div class="swiper-slide">
        <p style="font-size: 14px;
    margin: 0 200px;">We completed the London headquarters for music startup Platoon, responding to the Kings Cross site’s small footprint of 1900 sq. feet with an adaptable yet intimate arrangement of spaces. 

Using a contrasting palette of black-blues, off-whites and pale pink with starker black graphic elements and zoned lighting, we wanted to create a loft apartment-like feel in a workplace that regularly welcomes both new and established recording artists.</p>
      </div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon1.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon2.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon3.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon4.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon5.jpg"></div>
    </div>
    <h1 class="project-title" id="slide-onetitle" style="text-align: center;">PLATOON HQ KING'S CROSS LONDON 1</h1>
    <!-- Add Pagination -->

     <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <a href="#slide-two" class="down-arrow"><img src="http://studio-party.co.uk/wp/wp-content/uploads/2018/05/arrow-down-white.png"></a>
  </div>
  
<a href="#two" class="hash" id="slide-two"></a>
  <div class="swiper-container swiper1 hash" id="2">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/PlatoonTexture.jpg"></div>
      <div class="swiper-slide">
        <p style="font-size: 14px;
    margin: 0 200px;">We completed the London headquarters for music startup Platoon, responding to the Kings Cross site’s small footprint of 1900 sq. feet with an adaptable yet intimate arrangement of spaces. 

Using a contrasting palette of black-blues, off-whites and pale pink with starker black graphic elements and zoned lighting, we wanted to create a loft apartment-like feel in a workplace that regularly welcomes both new and established recording artists.</p>
      </div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon1.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon2.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon3.jpg"></div>
    </div>
    <h1 class="project-title" id="slide-twotitle" style="text-align: center;">PLATOON HQ KING'S CROSS LONDON 2</h1>
    <!-- Add Pagination -->

     <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <a href="#slide-three" class="down-arrow"><img src="http://studio-party.co.uk/wp/wp-content/uploads/2018/05/arrow-down-white.png"></a>
  </div>

<a href="#three" class="hash" id="slide-three"></a>
  <div class="swiper-container swiper1 hash" id="2">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/PlatoonTexture.jpg"></div>
      <div class="swiper-slide">
        <p style="font-size: 14px;
    margin: 0 200px;">We completed the London headquarters for music startup Platoon, responding to the Kings Cross site’s small footprint of 1900 sq. feet with an adaptable yet intimate arrangement of spaces. 

Using a contrasting palette of black-blues, off-whites and pale pink with starker black graphic elements and zoned lighting, we wanted to create a loft apartment-like feel in a workplace that regularly welcomes both new and established recording artists.</p>
      </div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon1.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon2.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon3.jpg"></div>
    </div>
    <h1 class="project-title" id="slide-threetitle" style="text-align: center;">PLATOON HQ KING'S CROSS LONDON 3</h1>
    <!-- Add Pagination -->

     <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <a href="#slide-four" class="down-arrow"><img src="http://studio-party.co.uk/wp/wp-content/uploads/2018/05/arrow-down-white.png"></a>
  </div>

<a href="#four" class="hash" id="slide-four"></a>
  <div class="swiper-container swiper1 hash" id="2">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/PlatoonTexture.jpg"></div>
      <div class="swiper-slide">
        <p style="font-size: 14px;
    margin: 0 200px;">We completed the London headquarters for music startup Platoon, responding to the Kings Cross site’s small footprint of 1900 sq. feet with an adaptable yet intimate arrangement of spaces. 

Using a contrasting palette of black-blues, off-whites and pale pink with starker black graphic elements and zoned lighting, we wanted to create a loft apartment-like feel in a workplace that regularly welcomes both new and established recording artists.</p>
      </div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon1.jpg"></div>
    </div>
    <h1 class="project-title" id="slide-fourtitle" style="text-align: center;">PLATOON HQ KING'S CROSS LONDON 4</h1>
    <!-- Add Pagination -->

     <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <a href="#slide-five" class="down-arrow"><img src="http://studio-party.co.uk/wp/wp-content/uploads/2018/05/arrow-down-white.png"></a>
  </div>

<a href="#five" class="hash" id="slide-five"></a>
  <div class="swiper-container swiper1 hash" id="2">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/PlatoonTexture.jpg"></div>
      <div class="swiper-slide">
        <p style="font-size: 14px;
    margin: 0 200px;">We completed the London headquarters for music startup Platoon, responding to the Kings Cross site’s small footprint of 1900 sq. feet with an adaptable yet intimate arrangement of spaces. 

Using a contrasting palette of black-blues, off-whites and pale pink with starker black graphic elements and zoned lighting, we wanted to create a loft apartment-like feel in a workplace that regularly welcomes both new and established recording artists.</p>
      </div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon1.jpg"></div>
      <div class="swiper-slide"><img style="width: 100%; height: 100%; object-fit: cover;" src="http://studio-party.co.uk/wp/wp-content/themes/Divi/slider/Platoon2.jpg"></div>
    </div>
    <h1 class="project-title slide-fivetitle" style="text-align: center;">PLATOON HQ KING'S CROSS LONDON 5</h1>
	  
	  
	  
	 
    <!-- Add Pagination -->

     <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我的诚实意见是，如果你热衷于编写代码，特别是javascript，Wordpress可能不是那样的。它是一个CMS，主要针对无意编写代码的人。

我无法帮助你，而不是邀请你尝试类似React之类的东西，在这些问题上，你将首先解决所有这些问题。

相关问题
最新问题