สอบถามเกี่ยวกับการ 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 ครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<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 02-02-2022 12:03:20

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

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


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


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

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

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


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


Antinew007 03-02-2022 01:24







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ