สอบถามเกี่ยวกับการ scroll display none & display block หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับการ scroll display none & display block หน่อยครับ

สอบถามเกี่ยวกับการ scroll display none & display block หน่อยครับ
ตัว script ที่เขียนไป จะมีลักษณะ เมื่อ scroll ไปเจอ class อะไร ก็จะเก็บค่า class เเล้วให้ไป show id ตัวนั้นครับ เเละ ตัวอื่นที่ไม่ใช่ค่าเดียวกันก็จะ hide เอาไว้ ผมติดปัญหาตรงที่ พอ scroll เเล้วค่าอื่นที่ไม่ใช่ค่าที่ active กลับไม่ hide ครับ

<style> 
    li{
        background : yellow;
		height: 500px;
        margin: 20px;
    }
	.c {
		display:none;
	}
	
	.c.active {
		display:block;
	}
</style>
<div class="c" id="p_para1" style="position: fixed;margin-top: -35px;">
   
    some 
</div>
<div class="c" id="p_para2" style="position: fixed;margin-top: -35px;">
    
   long text 
</div>
<ul>

<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para1" >
    <a name="para">Anchor</a>
    some long text 
</li> 
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>
<li class="para2" >
    <a name="para">Anchor</a>
    some text 
</li>

</ul>
<script>
    $(document).ready(function () {
        $(window).on('scroll', function () {
            var Wscroll = $(this).scrollTop();
			
            $('a[name^="para"]').each(function () {
                var ThisOffset = $(this).closest('li').offset();
                if (Wscroll > ThisOffset.top && Wscroll < ThisOffset.top + $(this).closest('li').outerHeight(true)) {
                    $(this).closest('li').css('background', 'red');
					var ffc = $(this).closest('li').attr('class');
						$("#p_"+ffc).show();
                }
            });
        });
    });
</script>


Antinew007 61.91.168.xxx 02-02-2022 12:03:20

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
เติมบรรทัดนี้เข้าไป

$("#p_"+ffc).show();
$(".c").not("#p_"+ffc).hide();


ninenik 223.24.164.xxx 02-02-2022
 ความคิดเห็นที่ 2
ขอบคุณครับ


Antinew007 49.49.249.xxx 03-02-2022 01:24






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ