ดาวน์โหลด react stickynode - รี react stickynode Source Source Download

react stickynode

ข้อมูลเว็บไซต์

v5.0.1

ดาวน์โหลด

react-stickynode

ส่วนประกอบที่ทำปฏิกิริยาและแบบครอบคลุม

ส่วนประกอบที่เหนียวจะห่อเป้าหมายเหนียวและเก็บเป้าหมายไว้ในวิวพอร์ตขณะที่ผู้ใช้เลื่อนหน้า ส่วนประกอบที่เหนียวส่วนใหญ่จัดการกับกรณีที่เป้าหมายเหนียวนั้นสั้นกว่าวิวพอร์ต แต่ไม่ใช่กรณีที่เป้าหมายเหนียวสูงกว่าวิวพอร์ต เหตุผลก็คือพฤติกรรมและการใช้งานที่คาดหวังนั้นซับซ้อนกว่ามาก

react-stickynode จัดการไม่เพียง แต่เคสปกติเท่านั้น แต่ยังเป็นเคสเป้าหมายที่เหนียวแน่นยาวตามธรรมชาติ ในกรณีปกติเมื่อเลื่อนหน้าลง react-stickynode จะติดอยู่ด้านบนของวิวพอร์ต แต่ในกรณีของเป้าหมายเหนียวที่สูงขึ้นมันจะเลื่อนไปพร้อมกับหน้าจนกว่าด้านล่างจะมาถึงด้านล่างของวิวพอร์ต กล่าวอีกนัยหนึ่งดูเหมือนว่าด้านล่างของวิวพอร์ตจะดึงจุดต่ำสุดของเป้าหมายเหนียวลงเมื่อเลื่อนหน้าลง ในทางกลับกันเมื่อเลื่อนหน้าขึ้นไปด้านบนของวิวพอร์ตจะดึงส่วนบนของเป้าหมายเหนียวขึ้น

พฤติกรรมนี้ให้เนื้อหาในเป้าหมายที่เหนียวสูงโอกาสที่จะแสดงมากขึ้น นี่เป็นสิ่งที่ดีโดยเฉพาะอย่างยิ่งสำหรับกรณีที่โฆษณาจำนวนมากอยู่ในรางที่ถูกต้อง

ไฮไลต์อีกประการหนึ่งคือ react-stickynode สามารถจัดการกรณีที่เป้าหมายเหนียวใช้เปอร์เซ็นต์เป็นหน่วยความกว้าง สำหรับหน้าการออกแบบที่ตอบสนองมันมีประโยชน์อย่างยิ่ง

คุณสมบัติ

ดึง scrollTop เพียงครั้งเดียวสำหรับส่วนประกอบที่เหนียวทั้งหมด
ฟังการเลื่อนม้วนที่มีประสิทธิภาพที่ดีขึ้น
ใช้ RAF เพื่ออัปเดตสถานะเหนียวเพื่อให้มีประสิทธิภาพที่ดีขึ้น
รองรับการชดเชยด้านบนจากด้านบนของหน้าจอ
รองรับขอบเขตด้านล่างเพื่อหยุดสถานะเหนียว
รองรับเป้าหมายเหนียว ๆ ด้วยหน่วยความกว้างต่างๆ

การใช้งาน

npm install react-stickynode

Sticky ใช้คุณสมบัติ Modernizr csstransforms3d และคุณสมบัติ prefixed (ลิงก์) เพื่อตรวจจับ IE8/9 ดังนั้นจึงสามารถลดระดับไม่ได้ว่าจะไม่ใช้ Transform3D

 import Sticky from 'react-stickynode' ;

< Sticky enabled = { true } top = { 50 } bottomBoundary = { 1200 } >
    < YourComponent />
</ Sticky > ;

 import Sticky from 'react-stickynode' ;

< Sticky top = "#header" bottomBoundary = "#content" >
    < YourComponent />
</ Sticky > ;

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	บันทึก
`enabled`	บูลีน	สวิตช์เพื่อเปิดใช้งานหรือปิดการใช้งาน Sticky (จริงตามค่าเริ่มต้น)
`top`	หมายเลข/สตริง	ออฟเซ็ตจากด้านบนของหน้าต่างซึ่งด้านบนขององค์ประกอบจะเป็นเมื่อสถานะเหนียวถูกทริกเกอร์ (0 โดยค่าเริ่มต้น) หากเป็นตัวเลือกไปยังเป้าหมาย (ผ่าน `querySelector()` ) การชดเชยจะเป็นความสูงของเป้าหมาย
`bottomBoundary`	หมายเลข/สตริง	ออฟเซ็ตจากด้านบนของเอกสารซึ่งสถานะการเปิดตัวจะถูกเรียกใช้เมื่อด้านล่างขององค์ประกอบถึงที่ หากเป็นตัวเลือกไปยังเป้าหมาย (ผ่าน `querySelector()` ) การชดเชยจะเป็นด้านล่างของเป้าหมาย
`innerZ`	หมายเลข/สตริง	z-index ของเหนียว
`enableTransforms`	บูลีน	เปิดใช้งานการใช้การแปลง CSS3 (จริงโดยค่าเริ่มต้น)
`activeClass`	สาย	ชื่อคลาสที่จะนำไปใช้กับองค์ประกอบเมื่อสถานะเหนียวทำงาน ( `active` โดยค่าเริ่มต้น)
`innerClass`	สาย	ชื่อคลาสที่จะนำไปใช้กับองค์ประกอบภายใน ( `''` โดยค่าเริ่มต้น)
`innerActiveClass`	สาย	ชื่อคลาสที่จะนำไปใช้กับองค์ประกอบภายในเมื่อสถานะเหนียวทำงาน ( `''` โดยค่าเริ่มต้น)
`className`	สาย	ชื่อคลาสที่จะนำไปใช้กับองค์ประกอบที่เป็นอิสระจากสถานะเหนียว
`releasedClass`	สาย	ชื่อคลาสที่จะนำไปใช้กับองค์ประกอบเมื่อสถานะเหนียวถูกปล่อยออกมา ( `released` โดยค่าเริ่มต้น)
`onStateChange`	การทำงาน	การโทรกลับเมื่อสถานะเหนียวเปลี่ยนแปลง ดูด้านล่าง
`shouldFreeze`	การทำงาน	การโทรกลับเพื่อระบุว่าปลั๊กอินเหนียวควรตรึงตำแหน่งและละเว้นการเลื่อน/ปรับขนาดเหตุการณ์ ดูด้านล่าง

การจัดการการเปลี่ยนแปลงของรัฐ

คุณสามารถได้รับการแจ้งเตือนเมื่อสถานะของส่วนประกอบเหนียวเปลี่ยนไปโดยส่งการโทรกลับไปยังเสา onStateChange การโทรกลับจะได้รับวัตถุในรูปแบบ {status: CURRENT_STATUS} โดย CURRENT_STATUS เป็นจำนวนเต็มแทนสถานะ:

ค่า	ชื่อ	บันทึก
`0`	`STATUS_ORIGINAL`	สถานะเริ่มต้นอยู่ที่ตำแหน่งเดิม
`1`	`STATUS_RELEASED`	สถานะที่ปล่อยออกมาตั้งอยู่ที่ใดที่หนึ่งบนเอกสาร แต่ไม่ใช่ค่าเริ่มต้น
`2`	`STATUS_FIXED`	สถานะเหนียวตั้งอยู่ที่ด้านบนหรือด้านล่างของหน้าจอ

คุณสามารถเข้าถึงสถานะเป็นค่าคงที่แบบคงที่เพื่อใช้สำหรับการเปรียบเทียบ

 import Sticky from 'react-stickynode' ;

const handleStateChange = ( status ) => {
    if ( status . status === Sticky . STATUS_FIXED ) {
        console . log ( 'the component is sticky' ) ;
    }
} ;

< Sticky onStateChange = { handleStateChange } >
    < YourComponent />
</ Sticky > ;

Sticky รองรับฟังก์ชั่นสำหรับเด็ก:

 import Sticky from 'react-stickynode' ;

< Sticky >
    { ( status ) => {
        if ( status . status === Sticky . STATUS_FIXED ) {
            return 'the component is sticky' ;
        }
        if ( status . status === Sticky . STATUS_ORIGINAL ) {
            return 'the component in the original position' ;
        }
        return 'the component is released' ;
    } }
</ Sticky > ;

หนาวจัด

คุณสามารถจัดเตรียมฟังก์ชั่นใน Prop shouldFreeze ซึ่งจะบอกให้ส่วนประกอบหยุดการอัปเดตชั่วคราวระหว่างการเปลี่ยนแปลง Prop และสถานะรวมถึงเพิกเฉยต่อการเลื่อนและปรับขนาดเหตุการณ์ ฟังก์ชั่นนี้ควรส่งคืนบูลีนเพื่อระบุว่าส่วนประกอบควรถูกแช่แข็งในปัจจุบันหรือไม่