Hide and show html element

Question

I am working on a wordpress site. I am new in this and here is what i have achieved so far. I am trying to hide and show the content on page scroll and, i have tried doing it using javascript. I don't know if there is a better way to do it. This code is working fine when scrolling from top to bottom, but not well from bottom to top. It skips the content. Thankyou

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

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

Answer 1

My honest opinion is that if you are keen on writing code, specifically javascript, Wordpress may not be the way to go. It is a CMS mostly aimed at people with no intention to write code.

I cannot help you better than invite you to try out something like React where all these problems you are taking on head-first will be solved for you.