แก้ไขแถบด้านข้างแบบลอยตัว เค้าโครงสองคอลัมน์คงที่ แถบด้านข้างคงที่

ที่น่าสนใจคือบล็อกที่ยังคงอยู่ในที่เดียวเมื่อเลื่อนเรียกว่า: "ย้าย", "ลอยน้ำ", "ย้าย", "มือถือ", "เลื่อน". และในความเป็นจริงเขา "ติดอยู่", "แก้ไขแล้ว", "แก้ไขแล้ว"และตั้งอยู่บนพื้นที่หนึ่งของหน้าจอมอนิเตอร์โดยไม่คำนึงถึงระดับการเลื่อนของหน้าเว็บ

ตัวแปรเริ่มต้นเมื่อไม่มีอะไรลอย

ข้อมูลเริ่มต้น: บล็อกอยู่ในตำแหน่งแล้ว ฉันมีบางอย่างแบบนี้กับส่วนท้ายที่ใหญ่ คุณมีอีกแบบหนึ่ง

วิธีสร้างบล็อก (div, ด้านข้าง, ฯลฯ ), ส่วนหัว, โฆษณา, เมนูได้รับการแก้ไข เฉพาะ CSS

บล็อกลอยที่ค้างเหนือส่วนท้ายหรือองค์ประกอบอื่นๆ Pure JavaScript โดยไม่ต้อง jQuery

เพื่อไม่ให้บล็อกลอยไม่ไปที่ส่วนท้ายของไซต์ แต่หยุดเหนือองค์ประกอบที่ระบุ

องค์ประกอบติดอยู่เฉพาะในขณะที่เลื่อนผ่านองค์ประกอบอื่น

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

วิธีทำให้สองบล็อค (ไม่จำเป็น) ติดอยู่ในแถบด้านข้างทั้งสองข้าง

สองบล็อกขึ้นไปได้รับการแก้ไขทีละอัน

เมื่อเลื่อนลงมา บล็อกแรกจะติด เมื่อพาเรนต์สิ้นสุด บล็อกนั้นจะคลายออก อันที่สองติดเมื่อผู้ปกครองสิ้นสุดก็จะหลุดออกมา แท่งที่สาม เป็นต้น

สิ่งเดียวกัน เฉพาะกับผู้ปกครองทั่วไปเท่านั้น

แถบข้างยาวแบบลอยได้โดยไม่มีช่องว่าง

เมื่อเลื่อนลง แถบด้านข้างจะติดอยู่เมื่อขอบด้านล่างแตะขอบด้านล่างของหน้าต่างเบราว์เซอร์ เมื่อเลื่อนขึ้น แถบด้านข้างจะติดเมื่อขอบด้านบนแตะขอบด้านบนของหน้าต่างเบราว์เซอร์ มีขีดจำกัดล่างที่คอลัมน์ถึง

จำเป็นต้องมีบล็อกแบบลอย (หรือที่เรียกอีกอย่างว่าการย้าย คงที่ ติดอยู่) เพื่อให้ผู้ใช้เห็นองค์ประกอบคงที่หนึ่งรายการเมื่อเลื่อนหน้า ซึ่งโฆษณามักจะวาง (ทีเซอร์ แบนเนอร์ หรือบริบท)

อนิจจากฎของ Adsense ห้ามเราสิ่งนี้ อย่างไรก็ตาม เจ้าของเว็บไซต์จำนวนมากเพิกเฉยต่อกฎเกณฑ์โดยยอมรับความเสี่ยงเอง บางทีพวกเขาอาจจะไม่ถูกลงโทษสำหรับเรื่องนี้ แต่ฉันจะไม่แนะนำให้เสี่ยง

ฉันวาง YAN ทีเซอร์/แบนเนอร์ของฉันไว้ในบล็อกดังกล่าว และบางครั้ง แทนที่จะแสดงโฆษณา ฉันแสดงโพสต์ที่คล้ายกันหรือข้อมูลที่เป็นประโยชน์สำหรับผู้เยี่ยมชม

มาบอกคุณว่าคุณสามารถสร้างบล็อกลอยบนไซต์ของคุณได้อย่างไร

งาน:ทำให้บล็อกสุดท้ายในแถบด้านข้าง (แถบด้านข้าง) ลอยตัว ยิ่งกว่านั้นเพื่อให้มันติดอยู่เฉพาะในขณะที่ผู้ใช้ไปถึงมันโดยการเลื่อนไม่ใช่ทันทีที่เปิดหน้า นอกจากนี้ บล็อกควร "ปิด" โดยไปถึงส่วนท้าย (เช่น ไม่ทับซ้อนกัน)

วิธีที่ได้ผลที่สุด

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

ด้านล่างนี้เป็นตัวอย่างของบล็อกแบบลอยตัวที่ทำงานบนเกือบทุกไซต์ที่ฉันติดตั้ง ไม่มีแพะ เอ็นจิ้นก็ไม่สำคัญเช่นกัน (DLE, WordPress, LiveStreet เป็นต้น)

วางโค้ด HTML ต่อไปนี้ในตำแหน่งที่ต้องการของแถบด้านข้าง:

$(window).scroll(ฟังก์ชัน() (
var sb_m = 20 ; /* ขอบบนและล่าง */
var mb = 300 ; /* ความสูงของชั้นใต้ดินพร้อมระยะขอบ */
varst = $(หน้าต่าง).scrollTop() ;
var sb = $(".sticky-block" );
var sbi = $(".sticky-block .inner" );
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

ถ้า(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
ถ้า(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : ช) );
}
อื่น(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

ในโค้ดนี้ คุณสามารถตั้งค่าด้านบน ด้านล่าง และความสูงของส่วนท้ายของคุณได้ เช่น ความสูงที่บล็อกควรหยุด

ตอนนี้เรารวม JS ในการดำเนินการนี้ ให้เขียนในส่วน HEAD:

คุณสามารถใช้ไฟล์ header.php ได้เองโดยใส่โค้ดนี้ระหว่างแท็กเปิดและแท็กปิดส่วนหัว และใส่ไว้ในแท็กสคริปต์ เช่น

คุณยังสามารถเขียนโค้ดนี้ในแท็กสคริปต์ที่ใดก็ได้ สิ่งสำคัญคือการโหลดในหน้าขวาของบล็อก ตัวอย่างเช่น คุณสามารถอยู่ใน footer.php ก่อนแท็กปิดเนื้อหา

ตอนนี้ไปที่รหัสนี้โดยตรง ปรากฎว่าหลังจาก 10 พิกเซลจากด้านบน ตำแหน่งสัมพัทธ์จะถูกแทนที่ด้วยตำแหน่งคงที่ (ดูบทความที่ลิงค์ด้านบน) หากจำเป็น คุณสามารถเลือกค่าอื่นที่ไม่ใช่ศูนย์สำหรับด้านบน จากนั้นเมนูที่แก้ไขที่ด้านบนจะเยื้องจากขอบด้านบนของวิวพอร์ตด้วยค่าพิกเซลนี้ (ในความคิดของฉัน นี่ไม่จำเป็น) .

ต่างจากโค้ดต้นฉบับ ฉันต้องเพิ่มความกว้าง: "100%" เพราะไม่เช่นนั้น ขนาดของเมนูในความกว้างจะลดลง ซึ่งทำให้ภาพรวมเสียหาย

เพื่อความชัดเจน ฉันจะให้รหัส Html ที่สร้างเมนูบนสุดในเทมเพลตบล็อก WordPress ของฉัน (อยู่ในไฟล์ header.php ของฉันจาก ):

ในเทมเพลตของคุณ เป็นไปได้มากว่าเอาต์พุตของรายการเมนูจะถูกตั้งค่าโดยใช้ตัวอย่าง เช่น โครงสร้าง (ฟังก์ชัน) แต่นี่ไม่ใช่ประเด็น

แน่นอนว่าฟังก์ชัน wp_list_pages นั้นดี (ช่วยให้คุณสามารถกำหนดค่าการเรียงลำดับ ตั้งค่าข้อยกเว้น ฯลฯ) แต่จะดีกว่าถ้าทำทุกอย่างด้วยตนเองผ่าน Html ธรรมดาดังที่แสดงด้านบน อิมโฮ

สิ่งสำคัญคือต้องเข้าใจในที่นี้ว่าเรื่องทั้งหมดได้ข้อสรุปแล้ว ลงในคอนเทนเนอร์ divs และหนึ่งบนสุดมีแอตทริบิวต์ id="navi" ที่นี่เราจะยึดติดกับมัน คุณเห็นในโค้ด JS ด้านบน มันเกิดขึ้นสองครั้ง #นำทาง? คุณจะต้องใส่ ID ของคุณที่นั่นแทน #navi (หรือคลาสที่คุณจำได้ ไม่ได้เขียนผ่านตาราง แต่เขียนผ่านจุด เช่น .menu)

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

นี้คุณเห็นไม่ดี ดังนั้น ฉันต้องใส่โค้ด CSS เล็กน้อยและเพิ่มค่า 1000 สำหรับ id ของตัวเลือก #navi:

#navi(พื้นหลัง:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) ซ้ำ-x;background-position:0px -10px;height:31px;z-index:1000 )

ความจริงก็คือเมื่อคุณตั้งค่าตำแหน่งหนึ่งในสามประเภทโดยใช้ตำแหน่ง องค์ประกอบนี้จะหยุดโต้ตอบกับองค์ประกอบปกติของโค้ด Html แต่กับตำแหน่งอื่นที่คล้ายคลึงกัน มันจะแข่งขันกันเพื่อตำแหน่ง "สูงหรือต่ำกว่า" z-index:1000 ทำให้เราสามารถวางเมนูของเราไว้เหนือบล็อคอื่นๆ ได้อย่างชัดเจน อ่านบทความด้านบนสำหรับรายละเอียด

วิธีสร้างแถบด้านข้างแบบลอยบน WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

แต่ส่วนใหญ่มักจะไม่เป็นเช่นนั้นและจะสามารถบังคับส่วนล่างให้ลอยได้ หากแถบด้านข้าง ในกรณีของฉัน เป็นเสาหินที่แยกออกไม่ได้ คุณสามารถสร้างบล็อกลอยได้ด้วยตัวเองโดยใช้หลักการที่วางไว้ในธีมการออกแบบที่คุณใช้ และวางไว้ใต้บล็อกหลัก

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

ฉันก็เลยเอา เพื่อสร้างบล็อกด้านล่างฉันย้ายส่วนบนของแถบด้านข้างหลักของฉัน (ในเทมเพลต sidebar.php) จากนั้นย้ายจากบล็อกบนสุดไปยังบล็อกด้านล่าง “ฉันใช้มันเพื่อสร้างรายได้” และในตอนท้าย ฉันติดอยู่ที่ส่วนท้ายของส่วนหลัก บล็อก. มันกลับกลายเป็นแบบนี้:

ตอนนี้ฉันมีบล็อก "ฉันใช้สำหรับรายได้" ที่ย้ายจากบล็อกบนสุดของแถบด้านข้างไปยังบล็อกด้านล่าง มันกลับกลายเป็นไม่ใช่น้ำพุ แต่สำหรับ "ชั่วคราว" มันจะทำ ยังคงเป็นเพียงการจัดเรียงทั้งหมดนี้ในไฟล์ JS พร้อมรหัสและบล็อกด้านล่างจะเริ่มลอย รหัส JS มีลักษณะดังนี้:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (ด้านบน)< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123")).css((top: "52px", position: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version)<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

โปรดทราบว่าแทนที่จะใช้ .sidebar123 คุณต้องแทนที่คลาสของคุณหรือ ID ของคอนเทนเนอร์ภายนอกที่บล็อกด้านล่างของแถบด้านข้างของคุณใช้งานได้

ฉันไม่เข้าใจรหัสนี้เป็นอย่างดี (ฉันไม่รู้จัก JS) แต่ทุกอย่างก็ใช้ได้ อย่างน้อยก็บางส่วน เมื่อคุณตั้งค่าตำแหน่งคงที่ รายงานจะมาจากจุดด้านซ้ายบน ดังนั้น ด้วย marginLeft: "760px" ฉันวางบล็อกนี้ไว้ที่ระดับของแถบด้านข้างพอดี (ตัวเลขได้มาจาก "การทดลองและข้อผิดพลาด")

ค่าสูงสุด: "52px" ตั้งค่าช่องว่างภายในของบล็อกแถบด้านข้างที่ลอยอยู่แล้วจากเส้นขอบด้านบน ค่าของด้านบนอย่างไรก็ตามฉันมี มีปัญหาในกรณีที่ความสูงรวมของแถบด้านข้างหลักน้อยกว่าความสูงของพื้นที่เนื้อหา สิ่งนี้ออกมาตัวอย่างเช่นเมื่อดูที่เก็บถาวรของหัวเรื่อง:

จากมุมมองของ CSS ฉันเข้าใจว่าทำไมสิ่งนี้ถึงเกิดขึ้น แต่ฉันขี้เกียจเกินกว่าจะคิดถึงการแก้ไข ฉันแค่ต้องปฏิเสธที่จะแสดงแถบด้านข้างแบบลอยบนหน้าดังกล่าว (ไม่จำเป็นที่นั่น)