ฉันพยายามที่จะแก้ไขdivดังนั้นมันมักจะติดที่ด้านบนของหน้าจอโดยใช้:

position: fixed;
top: 0px;
right: 0px;

อย่างไรก็ตามdivอยู่ภายในคอนเทนเนอร์กึ่งกลาง เมื่อฉันใช้position:fixedมันแก้ไขความdivสัมพันธ์กับหน้าต่างเบราว์เซอร์เช่นมันขึ้นทางด้านขวาของเบราว์เซอร์ แต่ควรได้รับการแก้ไขโดยสัมพันธ์กับคอนเทนเนอร์

ฉันรู้ว่าposition:absoluteสามารถนำมาใช้ในการแก้ไขปัญหาเป็นองค์ประกอบเทียบกับแต่เมื่อคุณเลื่อนหน้าเว็บลงหายไปองค์ประกอบและไม่ติดไปด้านบนเช่นเดียวกับdivposition:fixed

มีการแฮ็กหรือวิธีแก้ปัญหาเพื่อให้บรรลุนี้

คำตอบสั้น ๆ : ไม่ (ตอนนี้เป็นไปได้ด้วยการแปลง CSS ดูการแก้ไขด้านล่าง)

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

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

แก้ไข (03/2015):

นี่เป็นข้อมูลที่ล้าสมัย ตอนนี้มันเป็นไปได้ที่จะจัดวางเนื้อหาของขนาดไดนามิก (แนวนอนและแนวตั้ง) ด้วยความช่วยเหลือของเวทย์มนตร์ของการแปลง CSS3 หลักการเดียวกันนี้ translateX(-50%)แต่แทนที่จะใช้อัตรากำไรเพื่อชดเชยคอนเทนเนอร์ของคุณคุณสามารถใช้ วิธีนี้ใช้ไม่ได้กับเคล็ดลับการมาร์จิ้นข้างต้นเพราะคุณไม่ทราบว่าจะชดเชยเท่าไรเว้นแต่ความกว้างได้รับการแก้ไขและคุณไม่สามารถใช้ค่าสัมพัทธ์ (เช่น50%) ได้เพราะมันจะสัมพันธ์กับผู้ปกครองไม่ใช่องค์ประกอบ นำไปใช้กับ transformประพฤติแตกต่างกัน ค่าของมันจะสัมพันธ์กับองค์ประกอบที่ใช้ ดังนั้น50%สำหรับtransformครึ่งหนึ่งของความกว้างขององค์ประกอบในขณะที่50%สำหรับระยะขอบคือครึ่งหนึ่งของความกว้างของผู้ปกครอง นี่เป็นโซลูชัน IE9 +

การใช้โค้ดที่คล้ายกับตัวอย่างด้านบนฉันสร้างสถานการณ์ขึ้นใหม่โดยใช้ความกว้างและความสูงแบบไดนามิกทั้งหมด:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

หากคุณต้องการให้อยู่กึ่งกลางคุณสามารถทำได้เช่นกัน:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

สาธิตการใช้งาน:

jsFiddle: กึ่งกลางแนวนอนเท่านั้น
jsFiddle: กึ่งกลางทั้งแนวนอนและแนวตั้ง
เครดิตดั้งเดิมจะไปที่ผู้ใช้aaronk6เพื่อชี้ให้ฉันเห็นในคำตอบนี้

ที่จริงแล้วเป็นไปได้และคำตอบที่ได้รับการยอมรับนั้นเกี่ยวข้องกับการรวมศูนย์ซึ่งตรงไปตรงมาเพียงพอ นอกจากนี้คุณไม่จำเป็นต้องใช้ JavaScript

สิ่งนี้จะช่วยให้คุณจัดการกับสถานการณ์ใด ๆ :

ตั้งค่าทุกอย่างขึ้นตามที่คุณต้องการหากคุณต้องการ position: absolute ภายในตำแหน่ง: ญาติคอนเทนเนอร์แล้วสร้างตำแหน่งคงใหม่ div ภายใน div ด้วยposition: absoluteแต่ไม่ได้ตั้งค่าด้านบนและคุณสมบัติซ้าย มันจะได้รับการแก้ไขทุกที่ที่คุณต้องการเทียบกับภาชนะ

ตัวอย่างเช่น:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

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

ใช่ตามสเป็คมีวิธี

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

ฉันสังเกตโดยบังเอิญว่าเมื่อสมัคร

-webkit-transform: translateZ(0);

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

ดังนั้นฉันจึงทำการวิจัยและพบว่าปัญหาได้รับการครอบคลุมโดยEric Meyerและแม้ว่ามันจะรู้สึกเหมือน "เคล็ดลับ" ปรากฎว่านี่เป็นส่วนหนึ่งของข้อกำหนด:

สำหรับองค์ประกอบที่รูปแบบถูกควบคุมโดยรูปแบบกล่อง CSS ค่าใด ๆ นอกเหนือจากไม่มีสำหรับผลลัพธ์การแปลงในการสร้างทั้งบริบทการซ้อนและบล็อกที่มี วัตถุทำหน้าที่เป็นบล็อกที่มีสำหรับการสืบทอดตำแหน่งถาวร

http://www.w3.org/TR/css3-transforms/

ดังนั้นหากคุณใช้การแปลงใด ๆ กับองค์ประกอบหลักมันจะกลายเป็นบล็อกที่มี

แต่...

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

พฤติกรรมแบบเดียวกันนี้จะพบได้ใน Safari, Chrome และ Firefox แต่ไม่ใช่ใน IE11 (โดยที่องค์ประกอบคงที่จะยังคงได้รับการแก้ไข)

สิ่งที่น่าสนใจอีกอย่าง (ที่ไม่มีเอกสาร) คือเมื่อองค์ประกอบคงที่อยู่ภายในองค์ประกอบที่ถูกเปลี่ยนรูปในขณะที่มันtopและleftคุณสมบัติจะเกี่ยวข้องกับภาชนะบรรจุเคารพbox-sizingคุณสมบัติบริบทการเลื่อนของมันจะขยายไปตามขอบขององค์ประกอบราวกับว่ากล่อง -sizing border-boxถูกกำหนดให้ สำหรับความคิดสร้างสรรค์ที่นั่นสิ่งนี้อาจกลายเป็นของเล่น :)

ทดสอบ

คำตอบคือใช่ตราบใดที่คุณไม่ได้ตั้งค่าleft: 0หรือright: 0หลังจากคุณตั้งค่าตำแหน่ง div ให้คงที่

http://jsfiddle.net/T2PL5/85/

ชำระเงิน div ในแถบด้านข้าง ได้รับการแก้ไขแล้ว แต่เกี่ยวข้องกับพาเรนต์ไม่ใช่ไปยังจุดชมวิวหน้าต่าง

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

position: stickyposition: fixedที่เป็นวิธีใหม่ในการวางตำแหน่งองค์ประกอบที่เป็นแนวคิดที่คล้ายกับ ความแตกต่างคือองค์ประกอบที่มีposition: stickyพฤติกรรมเหมือนกับposition: relativeภายในพาเรนต์จนกว่าจะถึงขีด จำกัด ออฟเซ็ตที่กำหนดในวิวพอร์ต

ใน Chrome 56 (ปัจจุบันเป็นเบต้า ณ เดือนธันวาคม 2559 มีความเสถียรในเดือนมกราคม 2017): ตอนนี้เหนียวกลับมาแล้ว

https://developers.google.com/web/updates/2016/12/position-sticky

รายละเอียดเพิ่มเติมอยู่ในStick landings ของคุณ! ตำแหน่ง: ที่ดินเหนียวใน WebKit

แนวทางแก้ไข 2019: คุณสามารถใช้position: stickyคุณสมบัติได้

นี่คือตัวอย่างCODEPENposition: fixedแสดงให้เห็นถึงการใช้งานและยังเป็นวิธีที่มันแตกต่างจาก

การทำงานของมันอธิบายไว้ด้านล่าง:

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

2. มันมีผลต่อการไหลขององค์ประกอบอื่น ๆ ในหน้าเช่นครอบครองพื้นที่เฉพาะบนหน้า (เช่นposition: relative)

3. หากมีการกำหนดไว้ภายในคอนเทนเนอร์บางตัวมันจะอยู่ในตำแหน่งที่เหมาะสมกับคอนเทนเนอร์นั้น หากคอนเทนเนอร์มีโอเวอร์โฟลว์บางส่วน (เลื่อน) ขึ้นอยู่กับออฟเซ็ตเลื่อนจะเปลี่ยนเป็นตำแหน่ง: แก้ไข

ดังนั้นหากคุณต้องการใช้งานฟังก์ชั่นคงที่ แต่ภายในคอนเทนเนอร์ให้ใช้งานเหนียว

เพียงนำสไตล์ด้านบนและด้านซ้ายออกจาก div ตำแหน่งคงที่ นี่คือตัวอย่าง

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

div #content จะนั่งทุกที่ที่ div parent ตั้งอยู่ แต่จะแก้ไขที่นั่น

ฉันได้สร้างปลั๊กอิน jQuery นี้เพื่อแก้ปัญหาที่คล้ายกันฉันมีที่ที่ฉันมีที่อยู่กึ่งกลางคอนเทนเนอร์ (ข้อมูลแบบตาราง) และฉันต้องการให้ส่วนหัวเพื่อแก้ไขด้านบนของหน้าเมื่อรายการถูกเลื่อน แต่ฉันต้องการให้ยึด ข้อมูลแบบตารางดังนั้นจะเป็นทุกที่ที่ฉันวางคอนเทนเนอร์ (กึ่งกลาง, ซ้าย, ขวา) และอนุญาตให้มันเลื่อนไปทางซ้ายและขวาด้วยหน้าเมื่อเลื่อนในแนวนอน

นี่คือลิงค์ไปยังปลั๊กอิน jQuery นี้ที่อาจแก้ไขปัญหานี้ได้:

https://github.com/bigspotteddog/ScrollToFixed

คำอธิบายของปลั๊กอินนี้มีดังนี้:

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

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

ปลั๊กอินนี้ได้รับการทดสอบใน Firefox 3/4, Google Chrome 10/11, Safari 5 และ Internet Explorer 8/9

การใช้งานสำหรับกรณีเฉพาะของคุณ:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

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

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

สององค์ประกอบ HTML และ CSS บริสุทธิ์ (เบราว์เซอร์ที่ทันสมัย)

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

เป็นจำนวนมากที่นี่ได้กล่าวหนึ่งที่สำคัญคือไม่ได้ตั้งค่าการตั้งค่าตำแหน่งใด ๆ ในfixedองค์ประกอบ (ไม่top, right, bottomหรือleftค่า)

แต่เราใส่องค์ประกอบคงที่ทั้งหมด (โปรดสังเกตว่ากล่องสุดท้ายมีสี่รายการ) เป็นอันดับแรกในกล่องที่จะวางตำแหน่งออกเช่น:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

จากนั้นเราใช้margin-topและmargin-leftเพื่อ "ย้าย" พวกเขาที่เกี่ยวข้องกับภาชนะของพวกเขาสิ่งที่เป็นเช่นนี้ CSS ไม่:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

โปรดทราบว่าเนื่องจากfixedองค์ประกอบไม่สนใจองค์ประกอบเค้าโครงอื่น ๆ ทั้งหมดคอนเทนเนอร์สุดท้ายในซอของเราสามารถมีหลายfixedองค์ประกอบและยังคงมีองค์ประกอบเหล่านั้นทั้งหมดที่เกี่ยวข้องกับมุมซ้ายด้านบน แต่นี่เป็นความจริง แต่ถ้าพวกเขาจะถูกวางไว้ทุกครั้งแรกในภาชนะที่เป็นการเปรียบเทียบนี้แสดงให้เห็นว่าถ้าซอแยกย้ายกันไปในเนื้อหาของภาชนะที่จะกลายเป็นตำแหน่งที่ไม่น่าเชื่อถือ

ไม่ว่าจะเป็นเสื้อคลุมเป็นแบบคงที่ , ญาติหรือแน่นอนในการวางตำแหน่งก็ไม่ได้เรื่อง

คุณสามารถให้ลองไปปลั๊กอิน jQuery ของฉันFixTo

การใช้งาน:

$('#mydiv').fixTo('#centeredContainer');

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

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

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

จากนั้นคุณจำเป็นต้องรู้จำนวนองค์ประกอบของคุณจากด้านบนเมื่อแถบเลื่อนอยู่ด้านบน (y เป็นศูนย์เลื่อน) มีสองตัวเลือกอีกครั้ง อย่างแรกคือนั่นคือสแตติก (บางหมายเลข) หรือคุณต้องอ่านมันจากองค์ประกอบหลัก

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

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

นี่เป็นเรื่องง่าย (ตาม HTML ด้านล่าง)

เคล็ดลับคือไม่ใช้ด้านบนหรือด้านซ้ายบนองค์ประกอบ (div) ด้วย "ตำแหน่ง: แก้ไข;" หากไม่ได้ระบุสิ่งเหล่านี้องค์ประกอบ "เนื้อหาคงที่" จะปรากฏสัมพันธ์กับองค์ประกอบที่ล้อมรอบ (ส่วน div ที่มี "position: relative;") แทนที่ OF เทียบกับหน้าต่างเบราว์เซอร์ !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

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

ก่อนที่ฉันจะทำงานนี้ "X" เลื่อนขึ้นและมองไม่เห็นเมื่อฉันเลื่อนเนื้อหาข้อความลง

ขออภัยที่ไม่ได้ให้ฟังก์ชัน javascript hideDiv () ของฉัน แต่จะทำให้โพสต์นี้ไม่จำเป็น ฉันเลือกที่จะเก็บให้สั้นที่สุด

ฉันสร้าง jsfiddle เพื่อสาธิตวิธีการทำงานของการแปลงรูป

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

ฉันมีปัญหาเดียวกันสมาชิกหนึ่งในทีมของเราให้วิธีแก้ปัญหาแก่ฉัน ในการอนุญาตตำแหน่ง div fix และสัมพันธ์กับ div อื่นโซลูชันของเราคือการใช้คอนเทนเนอร์บิดาห่อ div fix และ scroll div

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

CSS

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

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

อย่างไรก็ตามอย่าคาดหวังว่าองค์ประกอบที่ตายตัวจะเลื่อนกับญาติที่ไม่ตายตัว

ดูการสาธิตที่นี่

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

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

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

เป็นไปได้ถ้าคุณใช้ JavaScript ในกรณีนี้ปลั๊กอิน jQuery Sticky-Kit :

โครงการของฉันคือ. NET ASP Core 2 MVC Angular 4 เทมเพลตกับ Bootstrap 4 การเพิ่ม "sticky-top" ลงในคอมโพเนนต์หลักของแอป html (เช่น app.component.html) ในแถวแรกทำงานดังนี้:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

นั่นคือการประชุมหรือฉันทำเกินขนาดนี้?

เมื่อคุณใช้position:fixedกฎ CSS และพยายามใช้top/ left/ right/ bottomวางตำแหน่งองค์ประกอบที่สัมพันธ์กับหน้าต่าง

วิธีแก้ไขคือใช้marginคุณสมบัติแทนtop/ left/ right/bottom

ตรวจสอบสิ่งนี้:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>