แก้ไขการบล็อกในแถบด้านข้าง แก้ไขเมนูด้านบนและแถบด้านข้างแบบลอยใน WordPress บล็อกสองบล็อกขึ้นไปได้รับการแก้ไขทีละบล็อก

ข้อกำหนดสำหรับเค้าโครงคืออะไร:

• เค้าโครงยางสองคอลัมน์
• แถบด้านข้างมีความกว้างคงที่ 300px
• เนื้อหาถูกขยายจนเต็มความกว้างที่เหลือ
• กดส่วนท้ายลงไปที่ด้านล่าง (ในบทเรียนนี้ ฉันจะไม่แสดงวิธีการทำ)

หากคุณทำให้บล็อกลอย คุณต้องกำหนดความกว้างคงที่ (คุณไม่สามารถตั้งค่าแถบด้านข้าง 1 แถบเป็น 300px และเนื้อหาเป็น 100%) ในกรณีนี้ เนื้อหาจะเลื่อนลงหรือเลื่อนแนวนอน 300px ไปทางซ้ายจะปรากฏขึ้น สิ่งสำคัญคือต้องเข้าใจว่าวิธีนี้ไม่เหมาะกับเรา

นักออกแบบเลย์เอาต์หลายคนเสนอวิธีนี้ พวกเขากำลังคิดอะไรอยู่?! สาระสำคัญของวิธีนี้คือคุณสามารถตั้งค่าแถบด้านข้างให้ลอยโดยมีความกว้าง 300 ได้ แต่เนื้อหาไม่ควรลอยและให้ขอบซ้าย: 300px ทางที่ดีและทุกอย่างดูเหมือนจะเป็นไปด้วยดี พูดตามตรง ฉันคิดว่านี่เป็นวิธีที่ดีที่สุด แต่วิธีนี้ก็มีข้อผิดพลาดอยู่ เหตุผลที่ละทิ้งวิธีนี้คือหากจู่ๆ ในเนื้อหาที่เรากำลังจัดวาง เช่น เมนูที่มี floated li หรือบล็อก float อื่นๆ แล้วเราต้องการล้างมันโดยใช้ clear:both จากนั้นไปที่ขอบล่างของบล็อกนี้ เลื่อนลงไปถึงระดับขอบล่างของแถบข้าง (ซึ่งก็ไม่แปลกเพราะเคลียร์โฟตออกแล้ว เลี่ยงได้ถ้าบล็อกลอยมีความสูงคงที่ แต่กรณีนี้กลับไม่เป็นเช่นนั้นกับการตั้งค่าคงที่ ความสูง).

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

แต่สำหรับฉันนี่ไม่ใช่วิธีที่ดีนักเช่นกัน!

“วิธีที่ยอดเยี่ยมหากมีข้อบกพร่องประการใดโปรดแสดงความคิดเห็น แต่ฉันคิดว่านี่เป็นวิธีที่ดีที่สุด”

• ข้อดีของวิธีนี้: ประการแรก เนื้อหา DOMe จะอยู่ก่อนแถบด้านข้าง ซึ่งดีสำหรับเครื่องมือค้นหา
• ไม่มีอะไรพอดีกับส่วนท้าย
• สามารถล้างบล็อกใดก็ได้และไม่มีอะไรเลื่อนไปที่ขอบด้านล่าง (นี่คือวิธีที่เราเอาชนะปัญหาของวิธีที่สอง)

โดยทั่วไป วิธีการทำงาน: ดูที่โค้ด เนื้อหามาก่อน ตามด้วยแถบด้านข้าง ตั้งค่าโฟลตให้กับทั้งสองบล็อกนี้ (โดยธรรมชาติแล้วแถบด้านข้างจะเลื่อนลง) หลังจากนั้นเราตั้งค่าคุณสมบัติขอบซ้ายของแถบด้านข้าง: -100% เยี่ยมเลย มันกลับมาเข้าที่แล้ว และเราเยื้องเนื้อหาด้วย margin-lerft:300px

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

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

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

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

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

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

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

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

$(หน้าต่าง).เลื่อน(ฟังก์ชั่น() (
var sb_m = 20 ; /* เติมด้านบนและด้านล่าง */
var MB = 300 ; / * ความสูงของชั้นใต้ดินพร้อมระยะขอบ */
var st = $(หน้าต่าง).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 + $(เอกสาร).scrollTop() + sb_m + mb< $(document) .height () ) {
ถ้า(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(( "paddingTop" : h) ) ;
}
อื่น(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
} ) ;

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

ตอนนี้เรามาเชื่อมต่อ JS กัน หากต้องการทำสิ่งนี้ ให้เขียนในส่วน HEAD:

เป็นวิธีที่ไม่ปลอดภัยเช่นกัน แต่โดยการติดตั้งปลั๊กอิน มันทำงานได้โดยไม่มีวงกบ

ข้อดี:

• ไม่จำเป็นต้องเข้าใจ/เข้าใจ HTML
• ความเรียบง่ายและความเร็วในการติดตั้ง

ข้อบกพร่อง:

วิธีใช้:

ดูเหมือนว่าฉันจะสะดวกน้อยลงและไม่ชัดเจนเท่าสองวิธีข้างต้น แต่ฉันจะบอกคุณเกี่ยวกับพวกเขาต่อไป

แทรกลงในแถบด้านข้าง:

เราเขียนสไตล์เป็น HTML (ควรเพิ่มโดยตรงใน CSS):

.เหนียว(
ตำแหน่ง: คงที่;
ดัชนี z: 101 ;
}
.หยุด(
ตำแหน่ง: ญาติ;
ดัชนี z: 101 ;
}

ตอนนี้เราเพิ่มสคริปต์ลงในเพจแล้ว (ควรใส่ไว้จะดีกว่า) แยกไฟล์เช่นเดียวกับใน "วิธีการทำงานที่ดีที่สุด"):

(การทำงาน() (
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // หากแทนที่ศูนย์ด้วยตัวเลข บล็อกจะติดก่อนที่ขอบด้านบนของหน้าต่างเบราว์เซอร์จะถึงขอบด้านบนขององค์ประกอบ อาจเป็นจำนวนลบก็ได้
window.addEventListener("scroll" , Ascroll, false); ;
document.body.addEventListener("เลื่อน" , Ascroll, false);
ฟังก์ชั่น Ascroll() (
ถ้า (b == โมฆะ) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
สำหรับ (var i = 0 ; i< Sa.length; i++) {
ถ้า (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 ||. Sa[ i].indexOf("padding" ) == 0 ||. Sa[ i].indexOf("border" ) == 0 ||. Sa[ i].indexOf("โครงร่าง" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 ||. Sa[ i].indexOf("พื้นหลัง" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
ก.innerHTML = "" +a.innerHTML+"" ;
b = ก.เด็ก[ 0 ] ;
ก.สไตล์ .height = b.getBoundingClientRect() .height + "px" ;
ก.สไตล์ .padding = "0" ;
ก.สไตล์ .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // ตัวเลือกบล็อกเมื่อถึงขอบด้านบนซึ่งคุณจะต้องเลิกปักหมุดองค์ประกอบเหนียว Math.round() ใช้สำหรับ IE เท่านั้น หากแทนที่ศูนย์ด้วยตัวเลข บล็อกจะติดก่อนที่ขอบด้านล่างขององค์ประกอบจะถึงส่วนท้าย
if ((Ra.top - P) วิธีสร้างบล็อก (div, กัน, ฯลฯ ), ส่วนหัว, โฆษณา, เมนูคงที่ เฉพาะ CSS #aside1 ( /* บล็อกที่จะยังคงอยู่ */ตำแหน่ง: คงที่;

ดัชนี z: 101; - ที่จริงแล้วสำหรับกรณีส่วนใหญ่: ปุ่มลอยเครือข่ายทางสังคม

วิธีสร้าง div stick ขณะเลื่อนหน้า เป็นสคริปท์แล้ว