“ ตำแหน่ง: เหนียว;” ไม่ทำงาน CSS และ HTML

177

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

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav style="position: sticky; position: -webkit-sticky;">
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

ขยายตัวอย่างข้อมูล

html css css-position

— Harleyoc1
แหล่งที่มา

10

ตำแหน่ง: เหนียวต้องการ coordonate เพื่อโทรไปยังสถานที่ที่จะติด

— G-Cyrillus

36

คุณต้องระวังองค์ประกอบหลักด้วย position: stickyสามารถหยุดทำงานได้ถ้าอยู่ใน flexbox จนกว่าคุณจะระวังและจะล้มเหลวหากมีoverflow: hiddenหรือoverflow: autoอยู่ระหว่างมันกับอะไรก็ตามที่มันเลื่อนอยู่ข้างใน (รากของร่างกายหรือบรรพบุรุษที่ใกล้ที่สุดที่มี overflow: scroll)

— user56reinstatemonica8

2

@ user56reinstatemonica8 OMG ขอบคุณมากสำหรับการบอกฉันเกี่ยวกับoverflow: hiddenและoverflow: auto! ฉันเกาหัวมาหลายวันเพื่อพยายามให้อึนี้ทำงาน

— Oneezy

206

ตำแหน่งปักหมุดเป็นลูกผสมของตำแหน่งสัมพัทธ์และตำแหน่งคงที่ องค์ประกอบจะถือว่าเป็นตำแหน่งสัมพัทธ์จนกว่าจะผ่านเกณฑ์ที่ระบุ ณ จุดนั้นจะถือว่าเป็นตำแหน่งคงที่
...
คุณต้องระบุเกณฑ์ที่มีอย่างน้อยหนึ่งในtop, right, bottomหรือleftเพื่อให้ได้ตำแหน่งเหนียวจะประพฤติตามที่คาดไว้ มิฉะนั้นจะแยกไม่ออกจากการวางตำแหน่งสัมพัทธ์ [ แหล่งที่มา: MDN ]

ดังนั้นในตัวอย่างของคุณคุณต้องกำหนดตำแหน่งที่ควรติดท้ายที่สุดโดยใช้topคุณสมบัติ

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

ขยายตัวอย่างข้อมูล

— มาร์วิน
แหล่งที่มา

124

โดยทั่วไปคำตอบนี้ไม่เพียงพอที่จะเหนียวในการทำงานผู้ปกครองยังไม่ควรมีคุณสมบัติล้น

— ViliusL

ขอบคุณสำหรับความคิดเห็นของคุณ. ฉันเห็นด้วยกับคุณว่าสำหรับตัวอย่างอื่น ๆ นอกเหนือจากคำตอบของ OP อาจไม่เพียงพอ คำตอบอื่น ๆ ชี้ให้เห็นนี้ :)

— มาร์วิน

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

— code4j

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

— Piotr Szlagura

ตำแหน่งที่ติดหนึบไม่ควรมีพาเรนต์ที่มีคุณสมบัติโอเวอร์โฟลว์รวมถึงไม่รองรับการติดหนึบในบางเบราว์เซอร์

— Rohan Shenoy

331

ตรวจสอบว่าองค์ประกอบที่บรรพบุรุษมีชุดล้น (เช่น overflow:hidden ); ลองสลับมัน คุณอาจต้องขึ้นต้น DOM สูงกว่าที่คุณคาดไว้ =)

สิ่งนี้อาจส่งผลกระทบต่อposition:stickyองค์ประกอบลูกหลานของคุณ

— MarsAndBack
แหล่งที่มา

36

หวังว่าฉันจะสามารถโหวตคุณได้หลายครั้ง! มันกัดฉันบ่อยกว่าที่ฉันจะยอมรับ

— Alexander Varwijk

2

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

— danday74

5

ฉันพลาด "s" ใน"องค์ประกอบหลัก"

— che-azeh

5

ฉันยังพลาด "s" :( และนั่นก็เป็นปัญหาในหลาย ๆ คนที่เขียนว่าคุณควรตรวจสอบผู้ปกครองเท่านั้นไม่ใช่ผู้ปกครองทั้งหมดฉันพบปัญหาของฉันโดยการตรวจสอบว่าการโทร$(stickyElement).parents().css("overflow", "visible")ในเว็บคอนโซลจะช่วยได้หรือไม่ ผู้ปกครองที่อยู่ห่างไกลซึ่งมีoverflow:hiddenสไตล์ซึ่งก่อให้เกิดปัญหาฉันหวังว่าฉันจะอ่านคำตอบนี้อย่างละเอียดมากขึ้น

— Mariusz Pawelski

2

หากคุณต้องการตรวจสอบoverflow:hiddenคุณสามารถเรียกใช้สคริปต์นี้ในคอนโซลเบราว์เซอร์ของคุณเพื่อตรวจสอบผู้ปกครอง / บรรพบุรุษทั้งหมดขององค์ประกอบที่กำหนด: gist.github.com/brandonjp/478cf6e32d90ab9cb2cd8cbb0799c7a7

— brandonjp

100

ฉันมีปัญหาเดียวกันและผมได้พบคำตอบที่นี่

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

โดยเฉพาะให้มองหาคุณสมบัติโอเวอร์โฟลว์ที่ตั้งค่าไว้บนพาเรนต์ คุณไม่สามารถใช้ : overflow: hidden, overflow: scrollหรือoverflow: autoผู้ปกครองของการเป็นposition: stickyองค์ประกอบ

— Miftah Mizwar
แหล่งที่มา

นี่เป็นคำตอบที่ถูกต้อง แต่เห็นคำตอบของฉันซึ่งช่วยระบุผู้ปกครองที่ทำให้เกิดปัญหา

— danday74

10

คุณควรตรวจสอบไม่เพียง แต่คอนเทนเนอร์หลักที่อยู่ใกล้ แต่ทั้งหมดองค์ประกอบหลักs

— Mariusz Pawelski

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

— 74

1

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

— xenetics

ช่วยชีวิต, คำอธิบายปัญหาง่าย ๆ , แต่มีงานแก้ปัญหาที่อยากรู้อยากเห็น

— ราหุลซิงห์

32

มีอีกหลายอย่างที่ฉันเจอ:

เมื่อองค์ประกอบเหนียวของคุณเป็นส่วนประกอบ (เชิงมุม ฯลฯ )

หากองค์ประกอบ 'เหนียว' เป็นองค์ประกอบที่มีองค์ประกอบตัวเลือกกำหนดเองเช่นองค์ประกอบเชิงมุมที่มีชื่อ<app-menu-bar>คุณจะต้องเพิ่มสิ่งต่อไปนี้ลงใน css ของส่วนประกอบ:
```
:host { display: block; }   
```
หรือ
```
app-menu-bar  { display: block; }   // (in the containing component's css)
```
Safari บน iOS โดยเฉพาะอย่างยิ่งดูเหมือนจะต้องการdisplay:blockแม้ในองค์ประกอบรากapp-rootของแอปพลิเคชันเชิงมุมหรือมันจะไม่ติด
หากคุณกำลังสร้างองค์ประกอบและกำหนด css ภายในองค์ประกอบ (เงา DOM / รูปแบบที่ห่อหุ้ม) ตรวจสอบให้แน่ใจว่าposition: stickyมีการใช้งานตัวเลือก 'outer' (เช่นapp-menu-barใน devtools ควรแสดงตำแหน่งเหนียว) และไม่div อยู่ในระดับสูงสุดส่วนประกอบ ด้วย Angular สิ่งนี้สามารถทำได้ด้วย:hostตัวเลือกใน css สำหรับส่วนประกอบของคุณ
```
:host
{
    position: sticky;
    display: block;   // this is the same as shown above
    top: 0;
    background: red;    
}
```

อื่น ๆ

หากองค์ประกอบที่ตามหลังองค์ประกอบที่ติดหนึบของคุณมีพื้นหลังทึบคุณต้องเพิ่มสิ่งต่อไปนี้เพื่อหยุดไม่ให้เลื่อนลงใต้:
```
.sticky-element { z-index: 100; }
.parent-of-sticky-element { position: relative; }
```
องค์ประกอบเหนียวของคุณจะต้องเป็นคนแรก (ก่อนเนื้อหาของคุณ) ถ้าใช้และหลังจากที่มันถ้าใช้topbottom
มีภาวะแทรกซ้อนเมื่อใช้overflow: hiddenกับองค์ประกอบห่อหุ้มของคุณ - โดยทั่วไปจะฆ่าองค์ประกอบเหนียวภายใน อธิบายได้ดีขึ้นในคำถามนี้
เบราว์เซอร์มือถืออาจปิดการใช้งานรายการเหนียว / คงตำแหน่งเมื่อมองเห็นแป้นพิมพ์บนหน้าจอ ฉันไม่แน่ใจเกี่ยวกับกฎที่แน่นอน (ไม่มีใครรู้) แต่เมื่อแป้นพิมพ์มองเห็นได้คุณจะมอง 'หน้าต่าง' ประเภทหนึ่งเข้าไปในหน้าต่างและคุณจะไม่สามารถรับสิ่งต่าง ๆ ได้อย่างง่ายดาย มองเห็นด้านบนที่แท้จริงของหน้าจอ
ให้แน่ใจว่าคุณมี:

position: sticky;

และไม่

display: sticky;

ความกังวลเรื่องการใช้งานอื่น ๆ

ระมัดระวังหากการออกแบบของคุณเรียกร้องให้ติดสิ่งที่ด้านล่างของหน้าจอบนอุปกรณ์มือถือ บน iPhone X เช่นพวกเขาแสดงบรรทัดแคบ ๆ เพื่อระบุภูมิภาคการรูด (เพื่อกลับไปที่หน้าแรก) - และองค์ประกอบต่างๆในภูมิภาคนี้ไม่สามารถคลิกได้ ดังนั้นหากคุณติดบางสิ่งต้องแน่ใจว่าได้ทำการทดสอบบน iPhone X ว่าผู้ใช้สามารถเปิดใช้งานได้ ปุ่ม 'ซื้อเลย' ขนาดใหญ่นั้นไม่ดีถ้าคนไม่สามารถคลิกได้!
หากคุณกำลังโฆษณาบน Facebook หน้าเว็บจะแสดงในการควบคุม 'webview' ภายในแอพมือถือของ Facebook โดยเฉพาะอย่างยิ่งเมื่อแสดงวิดีโอ (ที่เนื้อหาของคุณเริ่มต้นที่ครึ่งล่างของหน้าจอเท่านั้น) - พวกเขามักจะทำให้องค์ประกอบที่เหนียวเหนอะหนะโดยการวางหน้าเว็บของคุณไว้ใน viewport ที่เลื่อนได้ซึ่งทำให้องค์ประกอบที่เหนียวของคุณหายไปจากด้านบนของหน้า อย่าลืมทดสอบในบริบทของโฆษณาจริงไม่ใช่เฉพาะในเบราว์เซอร์ของโทรศัพท์หรือแม้แต่เบราว์เซอร์ของ Facebook ที่ทุกคนสามารถทำงานได้แตกต่างกัน

— Simon_Weaver
แหล่งที่มา

@ Sergey ฉันไม่ชัดเจนว่าอย่างใดdisplay: blockและposition: relativeก่อให้เกิดพฤติกรรมที่ถูกต้องใน Safari - มันดูเหมือนว่าdisplay: blockจำเป็นเท่านั้น? แน่นอนว่าอาจไม่เป็นการยากที่จะระบุทั้งคู่

— Simon_Weaver

2

เพียงdisplay: blockก็เพียงพอ

— Sergey

27

นี่คือความต่อเนื่องของคำตอบจาก MarsAndBack และ Miftah Mizwar

คำตอบของพวกเขาถูกต้อง อย่างไรก็ตามมันเป็นเรื่องยากที่จะระบุบรรพบุรุษของปัญหา

เพื่อให้ง่ายมากเพียงแค่เรียกใช้สคริปต์ jQuery นี้ในคอนโซลเบราว์เซอร์ของคุณและมันจะบอกคุณถึงคุณค่าของคุณสมบัติล้นในบรรพบุรุษทุกคน

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

ที่บรรพบุรุษไม่มีoverflow: visibleการเปลี่ยนแปลง CSS เพื่อที่จะทำ!

นอกจากนี้ตามที่ระบุไว้ที่อื่นให้แน่ใจว่าองค์ประกอบที่เหนียวของคุณมีสิ่งนี้ใน CSS:

.your-sticky-element {
    position: sticky;
    top: 0;
}

— danday74
แหล่งที่มา

2

นั่นเป็นประโยชน์มาก overflow: invisibleผมสามารถที่จะได้อย่างรวดเร็วระบุองค์ประกอบหลักที่มีค่าของ

— David Brower

4

หากคุณไม่มี jQuery บนหน้าของคุณคุณสามารถเรียกใช้ตัวอย่างข้อมูลขนาดเล็กนี้ในคอนโซลเพื่อเพิ่ม:

(async function() {   let response = await fetch('https://code.jquery.com/jquery-3.3.1.min.js');   let script = await response.text();   eval(script); })();

— magikMaker

8

นอกจากนี้คุณยังสามารถเรียกใช้ข้อมูลโค้ดนี้ที่ไม่ต้องใช้ JQuery เพื่อหาสิ่งที่ไม่ใช่ "มองเห็น" พ่อแม่ล้น:

var p = $0.parentElement; while(p != null) { var ov = getComputedStyle(p).overflow; if(ov !== 'visible') console.warn(ov, p); else console.log(ov, p); p = p.parentElement; }

ไหน$0เป็นองค์ประกอบสุดท้ายเลือกไว้ในเครื่องมือสำหรับนักพัฒนา

— Mariusz Pawelski

หนึ่งสามารถจัดการposition: fixedและคุณสมบัติที่เหมาะสมด้วย JavaScript คำถามไม่ได้ระบุความต้องการจาวาสคริปต์

— vintproykt

12

ฉันต้องใช้ CSS ต่อไปนี้เพื่อให้มันทำงาน:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

หากไม่สามารถใช้งานได้

overflow: hiddenไปถึงบรรพบุรุษทั้งหมดและให้แน่ใจว่าไม่มีองค์ประกอบเหล่านี้มี คุณต้องเปลี่ยนสิ่งนี้เป็นoverflow: visible

— Unicco
แหล่งที่มา

1

จอแสดงผล: ดิ้นทำให้สิ่งที่

— MaciejLisCK

6

ในกรณีที่คุณเจอปัญหานี้และคุณติดหนึบไม่ทำงานลองตั้งค่า parent เป็น:

display: unset

ทำงานให้ฉัน

— brianokinyi
แหล่งที่มา

นี่คือหนึ่ง

— mm-93

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

— Ben Philipp

นอกจากนี้ยังดูเหมือนว่าจะทำงานร่วมกับcontents, initialและ (?)inline

— เบนฟิลิปป์

5

ช่วงเวลาที่ตลกที่ไม่ชัดเจนสำหรับฉัน: อย่างน้อยใน Chrome 70 position: stickyจะไม่ถูกใช้หากคุณตั้งค่าโดยใช้ DevTools

— IK
แหล่งที่มา

คุณมีแหล่งที่มาสำหรับสิ่งนี้หรือข้อมูลอื่น ๆ เกี่ยวกับวิธีแก้ไขปัญหานี้หรือไม่?

— AJMansfield

5

ดูเหมือนว่า navbar ที่จะถูก stickied ไม่ควรอยู่ใน div หรือส่วนใด ๆ ของเนื้อหาอื่น ๆ วิธีการแก้ปัญหาไม่ทำงานสำหรับฉันจนกว่าฉันจะลบ navbar ออกจาก div ที่ navbar ใช้ร่วมกับ topbar อื่นก่อนหน้านี้ฉันเคยมี topbar และ navbar ที่ห่อด้วย div ทั่วไป

— solaris333
แหล่งที่มา

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

— saglamcem

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

— Ben Philipp

แต่แท้จริง! หากคุณสามารถทำได้ถ้าคุณตั้งค่าการ จำกัด พาเรนdisplay: unsetต์เป็นข้อ จำกัด นี้จะถูกยกขึ้น! ดูstackoverflow.com/a/60560997/2902367 ดูเหมือนว่าจะทำงานร่วมกับcontents, initial(?) และinline

— Ben Philipp

4

จากความคิดเห็นของฉัน:

position:sticky ต้องการ coordonate ในการโทรติด

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

ขยายตัวอย่างข้อมูล

มีโพลีฟิลที่จะใช้สำหรับเบราว์เซอร์อื่นที่ไม่ใช่ FF และ Chrome นี่เป็นกฎการทดลองที่สามารถนำไปใช้หรือไม่ผ่านเบราว์เซอร์ได้ตลอดเวลา Chrome เพิ่มไปสองสามปีที่ผ่านมาและจากนั้นลดลงดูเหมือนว่าจะย้อนกลับ ...

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

— G-Cyrillus
แหล่งที่มา

4

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

overflow:hiddenตอบครอบคลุม 90% ของกรณีที่ นั่นคือสถานการณ์ "เหนียวนำทาง" มากหรือน้อย

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

ภาชนะของคุณจะต้องมีความสูงที่คุณคาดหวังว่าองค์ประกอบของคุณจะเลื่อนภายใน ซึ่งในสถานการณ์ "คอลัมน์ด้านขวา" ของฉันคือความสูงของคอลัมน์ด้านซ้าย วิธีที่ดีที่สุดในการบรรลุเป้าหมายนี้คือใช้display:table-cellกับคอลัมน์ หากคุณทำไม่ได้และติดอยู่กับที่float:rightและเช่นฉันคุณจะต้องเดาความสูงคอลัมน์ด้านซ้ายเพื่อคำนวณด้วย Javascript

— อุโมงค์
แหล่งที่มา

2

"ถ้าองค์ประกอบเหนียวของคุณเป็นลูกคนเดียวของคอนเทนเนอร์คอนเทนเนอร์นั้นมีขนาดเท่ากันทุกประการและไม่มีที่ว่างให้เลื่อน" ทอง!!! ขอบคุณ!

— Mark Jackson

ใช่ เอาฉันสักครู่เพื่อหาอันนี้ ฉันพบว่ามันเป็นข้อ จำกัด ที่ไร้สาระในตอนแรก แต่ฉันคิดว่าอย่างน้อยก็ควรมีตัวเลือกสำหรับสิ่งนั้น ฉันมากต้องการสิ่งที่ชอบsticky-limit: parent, sticky-limit: bodyหรือsticky-limit: nth-parent(3)... อย่างไรก็ตาม: ถ้าคุณสามารถคุณสามารถยกข้อ จำกัด นี้โดยการตั้งค่าผู้ปกครอง จำกัด การdisplay: unsetตามที่ระบุไว้ในstackoverflow.com/a/60560997/2902367 นอกจากนี้ยังดูเหมือนว่าจะทำงานร่วมกับcontents, initialและ (?)inline

— เบนฟิลิปป์

3

ฉันรู้ว่านี่เป็นโพสต์เก่า แต่ถ้ามีคนอย่างฉันเพิ่งเริ่มยุ่งกับตำแหน่ง: เหนียวนี่อาจเป็นประโยชน์

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

— Marco Peralta
แหล่งที่มา

1

สองคำตอบที่นี่:

ลบoverflowคุณสมบัติออกจากbodyแท็ก
กำหนดheight: 100%เป็นbodyเพื่อแก้ไขปัญหาด้วยoverflow-y: auto

min-height: 100% ไม่ทำงานแทน height: 100%

— Javad Ebrahimi
แหล่งที่มา

1

ฉันเชื่อว่าบทความนี้พูดมากเกี่ยวกับวิธีการstickyทำงาน

ตำแหน่ง CSS Sticky ใช้งานได้จริง! ตำแหน่ง CSS เหนียวมีสองส่วนหลักรายการเหนียวและภาชนะเหนียว

Sticky Item - เป็นองค์ประกอบที่เรากำหนดด้วยตำแหน่ง: สไตล์ที่เหนียว องค์ประกอบที่จะลอยเมื่อตำแหน่ง viewport top: 0pxตรงกับความหมายตำแหน่งตัวอย่างเช่น:

Sticky Container - เป็นองค์ประกอบ HTML ซึ่งล้อมรอบรายการเหนียว นี่เป็นพื้นที่สูงสุดที่ไอเท็มเหนียวสามารถลอยได้

เมื่อคุณกำหนดองค์ประกอบด้วยตำแหน่ง: เหนียวคุณจะกำหนดองค์ประกอบหลักโดยอัตโนมัติเป็นคอนเทนเนอร์เหนียว!

— yuval.bl
แหล่งที่มา

1

พฤติกรรมที่แท้จริงขององค์ประกอบที่เหนียวคือ:

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

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

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

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

ตัวอย่างนี้จะช่วยให้คุณเข้าใจ:

code https://codepen.io/darylljann/pen/PpjwPM

— Juanma Menendez
แหล่งที่มา

0

หากการแก้ไขของ danday74 ไม่ทำงานให้ตรวจสอบว่าองค์ประกอบหลักมีความสูง

ในกรณีของฉันฉันมีลูกสองคนหนึ่งที่เหลือลอยและหนึ่งที่ถูกต้องลอย ฉันต้องการคนที่ลอยอยู่ด้านขวากลายเป็นเหนียว แต่ต้องเพิ่ม<div style="clear: both;"></div>ที่ท้ายของผู้ปกครองเพื่อให้ความสูง

— Flo
แหล่งที่มา

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

— aexl

0

ฉันใช้โซลูชัน JS มันทำงานได้ใน Firefox และ Chrome ปัญหาใด ๆ แจ้งให้เราทราบ

HTML

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

CSS

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

js

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

— Carl Brubaker
แหล่งที่มา

0

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

— Rexhin Hoxha
แหล่งที่มา

0

นี่คือสิ่งที่ทำให้ฉันสะดุด ... div ที่เหนียวของฉันอยู่ใน div อื่นเพื่อให้ div parent ต้องการเนื้อหาเพิ่มเติมหลังจาก div ที่เหนียวเพื่อทำให้ div ของผู้ปกครอง "สูงพอ" สำหรับ div ที่เหนียวเพื่อ "เลื่อนผ่าน" เนื้อหาอื่น ๆ เช่น คุณเลื่อนลง

ดังนั้นในกรณีของฉันหลังจาก div เหนียวฉันต้องเพิ่ม:

    %div{style:"height:600px;"} 
      &nbsp;

(แอปพลิเคชันของฉันมี divs สองด้านพร้อมกับภาพ "สูง" ด้านซ้ายและแบบฟอร์มการป้อนข้อมูลสั้น ๆ ทางด้านขวาและฉันต้องการให้แบบฟอร์มการป้อนข้อมูลลอยไปข้างๆรูปภาพเมื่อคุณเลื่อนลง ดังนั้นแบบฟอร์มจะปรากฏบนหน้าจอเสมอมันจะไม่ทำงานจนกว่าฉันจะเพิ่ม "เนื้อหาพิเศษ" ข้างต้นดังนั้น div ที่เหนียวจึงมีบางสิ่งที่ "เลื่อนผ่าน"

— JPW
แหล่งที่มา

-1

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

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}

— เหงียนเย็น
แหล่งที่มา