คำถามติดแท็ก fixed

ฉันพยายามที่จะแก้ไขdivดังนั้นมันมักจะติดที่ด้านบนของหน้าจอโดยใช้: position: fixed; top: 0px; right: 0px; อย่างไรก็ตามdivอยู่ภายในคอนเทนเนอร์กึ่งกลาง เมื่อฉันใช้position:fixedมันแก้ไขความdivสัมพันธ์กับหน้าต่างเบราว์เซอร์เช่นมันขึ้นทางด้านขวาของเบราว์เซอร์ แต่ควรได้รับการแก้ไขโดยสัมพันธ์กับคอนเทนเนอร์ ฉันรู้ว่าposition:absoluteสามารถนำมาใช้ในการแก้ไขปัญหาเป็นองค์ประกอบเทียบกับแต่เมื่อคุณเลื่อนหน้าเว็บลงหายไปองค์ประกอบและไม่ติดไปด้านบนเช่นเดียวกับdivposition:fixed มีการแฮ็กหรือวิธีแก้ปัญหาเพื่อให้บรรลุนี้

639 css  position  css-position  fixed 

ตอนนี้ฉันกำลังมองหาวิธีแก้ปัญหาแถบด้านข้างที่เหนียว ฉันมีความคิดที่เฉพาะเจาะจงว่าฉันต้องการให้ดำเนินการอย่างไร อย่างมีประสิทธิภาพฉันต้องการให้มันติดอยู่ที่ด้านล่างเมื่อคุณเลื่อนลงจากนั้นทันทีที่คุณเลื่อนกลับขึ้นฉันต้องการให้มันติดอยู่ด้านบนในลักษณะที่ลื่นไหล (ไม่กระโดด) ฉันไม่สามารถหาตัวอย่างของสิ่งที่ฉันพยายามจะบรรลุได้ดังนั้นฉันจึงสร้างภาพที่ฉันหวังว่าจะอธิบายประเด็นให้ชัดเจนขึ้น: แถบด้านข้างอยู่ใต้ส่วนหัว เมื่อคุณเลื่อนลงแถบด้านข้างจะยังคงอยู่ในระดับเดียวกับเนื้อหาของเพจเพื่อให้คุณสามารถเลื่อนดูทั้งแถบด้านข้างและเนื้อหาได้ ไปถึงด้านล่างสุดของแถบด้านข้างแถบด้านข้างจะติดที่ด้านล่างของวิวพอร์ต (ปลั๊กอินส่วนใหญ่อนุญาตให้ติดที่ด้านบนเท่านั้นบางส่วนที่อนุญาตให้ติดที่ด้านล่างไม่อนุญาตให้ใช้ทั้งสองอย่าง) ไปถึงด้านล่างแถบด้านข้างจะอยู่เหนือส่วนท้าย ในขณะที่คุณเลื่อนกลับขึ้นแถบด้านข้างจะอยู่ในระดับเดียวกับเนื้อหาเพื่อให้คุณสามารถเลื่อนดูเนื้อหาและแถบด้านข้างได้อีกครั้ง ไปถึงด้านบนสุดของแถบด้านข้างแถบด้านข้างจะติดที่ด้านบนสุดของวิวพอร์ต ไปถึงด้านบนและแถบด้านข้างจะอยู่ด้านล่างส่วนหัว ฉันหวังว่านี่เป็นข้อมูลที่เพียงพอ ฉันได้สร้าง jsfiddle เพื่อทดสอบปลั๊กอิน / สคริปต์ใด ๆ ซึ่งฉันได้รีเซ็ตสำหรับคำถามนี้: http://jsfiddle.net/jslucas/yr9gV/2/ .

94 jquery  position  fixed  sidebar  sticky 

ฉันมีดังต่อไปนี้ข้อมูลโค้ด (จำเป็นที่จะต้องดูในโหมดเต็มหน้าจอ) ที่ฉันพยายามที่จะวาง<main>องค์ประกอบโดยตรงภายใต้<header>องค์ประกอบ ฉัน<header>อยู่ในตำแหน่งคงที่เพราะฉันต้องการให้อยู่ด้านบนของหน้าจอในขณะที่ผู้ใช้เลื่อนดูเนื้อหาใน<main>องค์ประกอบ ฉันได้ลองทุกอย่างที่ฉันรู้แล้ว แต่สิ่งที่ดีที่สุดที่ฉันสามารถทำได้คือการ<header>วางองค์ประกอบไว้บน<main>องค์ประกอบซึ่งตัดเนื้อหาอันใหญ่ออกไป วิธีการแก้ปัญหาที่เป็นไปได้ใกล้เคียงที่สุดที่ฉันได้มาด้วยการวางด้านบน padding guesstimated ในองค์ประกอบจึงจะล้าง<main> <header>อย่างไรก็ตามวิธีนี้ไม่ได้คำนึงถึงขนาดหน้าจอที่หลากหลายเนื่องจากฉันใช้การปรับขนาด rem แทน px แนวคิดการเติมด้านบนแย่ลงมากเมื่อวางองค์ประกอบหลายอย่างภายในความสูง<header>ที่สัมพันธ์กันหรือใช้เปอร์เซ็นต์ความสูง ในขนาดหน้าจอเดียวทุกอย่างอาจเข้ากันได้อย่างสมบูรณ์แบบและขนาดหน้าจอที่แตกต่างกันเนื้อหาอาจจะถูกปิด สุดท้ายฉันรู้ว่าฉันสามารถใช้ jQuery เพื่อตั้งค่าการเติมด้านบนแบบไดนามิก แต่ดูเหมือนจะไม่ได้ผลดีนัก สงสัยว่ามีโซลูชัน css / html แท้ ทุกคนสามารถบอกสิ่งที่ฉันหายไปที่นี่ได้ไหม วิธีการเติมเต็มด้านบนของฉันเป็นเพียงวิธีแก้ปัญหาที่ใช้การได้หรือไม่ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > …

15 html  css  css-position  fixed