Vị trí của người: dính; không hoạt động CSS và HTML

Tôi muốn làm cho Thanh điều hướng dính lên trên cùng một khi tôi cuộn đến nó, nhưng nó không hoạt động và tôi không biết tại sao. Nếu bạn có thể vui lòng giúp đỡ, đây là mã HTML và CSS của tôi:

.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>

Định vị dính là một kết hợp của định vị tương đối và cố định. Phần tử được coi là vị trí tương đối cho đến khi nó vượt qua một ngưỡng xác định, tại điểm đó nó được coi là vị trí cố định.
...
Bạn phải xác định một ngưỡng với ít nhất một trong top, right, bottom, hoặc leftđể định vị dính để hành xử như mong đợi. Nếu không, nó sẽ không thể phân biệt với định vị tương đối. [ nguồn: MDN ]

Vì vậy, trong ví dụ của bạn, bạn phải xác định vị trí mà nó sẽ dính vào cuối cùng bằng cách sử dụng thuộc toptính.

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>

Kiểm tra xem một phần tử tổ tiên có tập hợp tràn (ví dụ overflow:hidden); cố gắng để thay đổi nó Bạn có thể phải đi lên cây DOM cao hơn bạn mong đợi =).

Điều này có thể ảnh hưởng đến position:stickyyếu tố con cháu của bạn .

Tôi có cùng một vấn đề, và tôi tìm thấy câu trả lời ở đây .

Nếu phần tử của bạn không dính như mong đợi, điều đầu tiên cần kiểm tra là các quy tắc được áp dụng cho vùng chứa.

Cụ thể, tìm kiếm bất kỳ thuộc tính tràn nào được đặt trên cha mẹ. Bạn không thể sử dụng : overflow: hidden, overflow: scrollhoặc overflow: autotrên cha của một position: stickyphần tử.

Vài điều nữa tôi đã đi qua:

Khi phần tử dính của bạn là một thành phần (góc v.v.)

• Nếu chính phần tử 'dính' là một thành phần có bộ chọn thành phần tùy chỉnh, chẳng hạn như thành phần góc có tên, <app-menu-bar>bạn sẽ cần thêm phần sau vào css của thành phần:

  :host { display: block; }   

  hoặc là

  app-menu-bar  { display: block; }   // (in the containing component's css)

  Safari trên iOS nói riêng dường như yêu cầu display:blockngay cả yếu tố gốc app-rootcủa một ứng dụng góc cạnh hoặc nó sẽ không dính.

• Nếu bạn đang tạo một thành phần và xác định css bên trong thành phần (kiểu DOM bóng / đóng gói), hãy đảm bảo rằng position: stickynó đang được áp dụng cho bộ chọn 'bên ngoài' (ví dụ: app-menu-bartrong devtools sẽ hiển thị vị trí dính) và không phải là mức cao nhất div trong thanh phân. Với Angular, điều này có thể đạt được với :hostbộ chọn trong css cho thành phần của bạn.

  :host
  {
      position: sticky;
      display: block;   // this is the same as shown above
      top: 0;
      background: red;    
  }

Khác

• Nếu phần tử theo sau phần tử dính của bạn có nền vững chắc, bạn phải thêm phần sau để ngăn phần tử trượt bên dưới:

  .sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }

• Yếu tố dính của bạn phải là đầu tiên (trước nội dung của bạn) nếu sử dụng topvà sau nó nếu sử dụng bottom.

• Có các biến chứng khi sử dụng overflow: hiddentrên phần tử trình bao bọc của bạn - nói chung nó sẽ giết chết phần tử dính bên trong. Giải thích rõ hơn trong câu hỏi này

• Trình duyệt di động có thể vô hiệu hóa các mục được định vị dính / cố định khi bàn phím trên màn hình hiển thị. Tôi không chắc chắn về các quy tắc chính xác (có ai từng biết) nhưng khi bàn phím hiển thị, bạn đang nhìn vào một loại 'cửa sổ' vào cửa sổ và bạn sẽ không dễ dàng có thể khiến mọi thứ dính vào thực tế nhìn thấy trên cùng của màn hình.

• Hãy chắc chắn rằng bạn có:

  position: sticky;

  và không

  display: sticky;

Linh tinh khả năng sử dụng

• Hãy thận trọng nếu thiết kế của bạn yêu cầu dán mọi thứ vào đáy màn hình trên thiết bị di động. Ví dụ, trên iPhone X, chúng hiển thị một đường hẹp để chỉ ra vùng vuốt (để quay lại trang chủ) - và các yếu tố bên trong khu vực này không thể nhấp được. Vì vậy, nếu bạn dính một cái gì đó, hãy chắc chắn kiểm tra trên iPhone X rằng người dùng có thể kích hoạt nó. Nút 'Mua ngay' lớn sẽ không tốt nếu mọi người không thể nhấp vào nút đó!
• Nếu bạn đang quảng cáo trên Facebook, trang web sẽ được hiển thị trong điều khiển 'webview' trong các ứng dụng di động của Facebook. Đặc biệt là khi hiển thị video (nơi nội dung của bạn chỉ bắt đầu ở nửa dưới màn hình) - chúng thường làm rối hoàn toàn các yếu tố dính bằng cách đặt trang của bạn trong chế độ xem có thể cuộn thực sự cho phép các yếu tố dính của bạn biến mất khỏi đầu trang. Hãy chắc chắn kiểm tra trong ngữ cảnh của một quảng cáo thực tế và không chỉ trong trình duyệt của điện thoại hoặc thậm chí trình duyệt của Facebook mà tất cả có thể hoạt động khác nhau.

Đây là phần tiếp theo của câu trả lời từ MarsAndBack và Miftah Mizwar.

Câu trả lời của họ là chính xác. Tuy nhiên, rất khó để xác định (các) tổ tiên vấn đề.

Để làm cho điều này rất đơn giản, chỉ cần chạy tập lệnh jQuery này trong bảng điều khiển trình duyệt của bạn và nó sẽ cho bạn biết giá trị của thuộc tính tràn trên mỗi tổ tiên.

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

Trường hợp tổ tiên không overflow: visiblethay đổi CSS của nó để làm như vậy!

Ngoài ra, như đã nêu ở nơi khác, hãy đảm bảo phần tử dính của bạn có phần này trong CSS:

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

Tôi đã phải sử dụng CSS sau đây để làm cho nó hoạt động:

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

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

Nếu ở trên không hoạt động thì ...

Đi qua tất cả các tổ tiên và đảm bảo không có yếu tố nào trong số này có overflow: hidden . Bạn phải thay đổi điều này thànhoverflow: visible

Trong trường hợp bạn gặp phải điều này và dính của bạn không hoạt động - hãy thử đặt cha mẹ thành:

display: unset

Đã làm cho tôi

Khoảnh khắc hài hước không rõ ràng đối với tôi: ít nhất trong Chrome 70 position: stickykhông được áp dụng nếu bạn đã đặt nó bằng DevTools.

Có vẻ như thanh điều hướng bị dính không nên nằm trong bất kỳ div hoặc phần nào có nội dung khác. Không có giải pháp nào phù hợp với tôi cho đến khi tôi lấy thanh điều hướng ra khỏi div mà thanh điều hướng được chia sẻ với một thanh trên cùng khác. Trước đây tôi có thanh trên cùng và thanh điều hướng được bọc bằng một div chung.

từ nhận xét của tôi:

position:sticky cần một sự phối hợp để tel nơi gắn bó

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>

Có polyfill để sử dụng cho các trình duyệt khác ngoài FF và Chrome. Đây là một quy tắc thử nghiệm có thể được thực hiện hoặc không bất cứ lúc nào thông qua các trình duyệt. Chrome thêm nó một vài năm trước và sau đó bỏ nó, nó dường như trở lại ... nhưng trong bao lâu?

Gần nhất sẽ là vị trí: tương đối + tọa độ được cập nhật trong khi cuộn một lần đạt đến điểm dính, nếu bạn muốn biến điều này thành tập lệnh javascript

Tôi biết điều này dường như đã được trả lời, nhưng tôi gặp phải một trường hợp cụ thể và tôi cảm thấy hầu hết các câu trả lời đều sai điểm.

Các overflow:hiddencâu trả lời bao gồm 90% các trường hợp. Đó ít nhiều là kịch bản "dính hải quân".

Nhưng hành vi dính được sử dụng tốt nhất trong chiều cao của một container. Hãy nghĩ về một mẫu bản tin ở cột bên phải của trang web của bạn cuộn xuống cùng với trang. Nếu phần tử dính của bạn là con duy nhất của container, thì container có cùng kích thước và không có chỗ để cuộn.

Container của bạn cần phải là chiều cao mà bạn mong muốn phần tử của mình sẽ cuộn vào bên trong. Mà trong kịch bản "cột bên phải" của tôi là chiều cao của cột bên trái. Cách tốt nhất để đạt được điều này là sử dụng display:table-celltrên các cột. Nếu bạn không thể, và bị mắc kẹt float:rightvà giống như tôi, bạn sẽ phải đoán chiều cao cột bên trái của tính toán với Javascript.

Tôi biết đây là một bài viết cũ. Nhưng nếu có ai đó giống tôi mà gần đây mới bắt đầu loay hoay với vị trí: dính cái này có thể hữu ích.

Trong trường hợp của tôi, tôi đã sử dụng vị trí: dính như một mục lưới. Nó không hoạt động và vấn đề là tràn-x: ẩn trên htmlphần tử. Ngay sau khi tôi loại bỏ tài sản đó, nó hoạt động tốt. Có overflow-x: ẩn trên bodyphần tử dường như hoạt động tho, không biết tại sao.

hai câu trả lời ở đây:

1. xóa overflowtài sản khỏi bodythẻ

2. thiết lập height: 100%để bodykhắc phục sự cố vớioverflow-y: auto

min-height: 100% không làm việc thay vì height: 100%

Tôi tin rằng bài viết này nói rất nhiều về cách làm stickyviệc

Vị trí CSS dính thực sự hoạt động như thế nào! CSS vị trí dính có hai phần chính, mục dính & thùng chứa dính .

Mục dính  - là yếu tố mà chúng tôi đã xác định với vị trí: kiểu dính. Phần tử sẽ nổi khi vị trí khung nhìn khớp với định nghĩa vị trí, ví dụ : top: 0px.

Container dính dính là phần tử HTML bao bọc vật phẩm dính. Đây là khu vực tối đa mà vật phẩm dính có thể nổi.

Khi bạn xác định một thành phần có vị trí: dính, bạn sẽ tự động xác định thành phần chính là vùng chứa dính!

Hành vi thực sự của một yếu tố dính là:

• Đầu tiên nó là tương đối trong một thời gian
• sau đó nó được sửa trong một thời gian
• cuối cùng, nó biến mất khỏi tầm nhìn

Một phần tử được định vị dính được coi là vị trí tương đối cho đến khi khối chứa của nó vượt qua một ngưỡng được chỉ định (chẳng hạn như đặt đỉnh thành giá trị khác với tự động) trong gốc luồng của nó (hoặc vùng chứa mà nó cuộn bên trong), tại đó nó được coi là "bị kẹt "Cho đến khi gặp cạnh đối diện của khối chứa nó.

Phần tử được định vị theo luồng thông thường của tài liệu, sau đó bù tương ứng với tổ tiên cuộn gần nhất của nó và chứa khối (tổ tiên cấp khối gần nhất), bao gồm các phần tử liên quan đến bảng, dựa trên các giá trị trên cùng, bên phải, dưới cùng, và rời đi. Phần bù không ảnh hưởng đến vị trí của bất kỳ phần tử nào khác.

Giá trị này luôn tạo ra một bối cảnh xếp chồng mới. Lưu ý rằng một phần tử dính "dính" vào tổ tiên gần nhất của nó có "cơ chế cuộn" (được tạo khi ẩn tràn, cuộn, tự động hoặc lớp phủ), ngay cả khi tổ tiên đó không phải là tổ tiên thực sự cuộn gần nhất.

Ví dụ này sẽ giúp bạn hiểu:

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

nếu bản sửa lỗi của danday74 không hoạt động, hãy kiểm tra xem phần tử cha có chiều cao không.

Trong trường hợp của tôi, tôi có hai đứa con, một bên trái và một bên phải nổi. Tôi muốn một cái nổi bên phải trở nên dính nhưng phải thêm một cái <div style="clear: both;"></div>ở cuối của cha mẹ, để cho nó chiều cao.

Tôi đã sử dụng một giải pháp JS. Nó hoạt động trong Firefox và Chrome. Bất kỳ vấn đề, cho tôi biết.

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()
    }
}

z-indexcũng rất quan trọng Đôi khi nó sẽ hoạt động nhưng bạn sẽ không nhìn thấy nó. Hãy thử đặt nó thành một số rất cao chỉ để đảm bảo. Ngoài ra, đừng luôn đặt top: 0nhưng hãy thử một cái gì đó cao hơn trong trường hợp nó bị ẩn ở đâu đó (dưới thanh công cụ).

Đây là những gì đã làm tôi vấp ngã ... div dính của tôi nằm trong một div khác để div cha cần một số nội dung bổ sung SAU div div, để làm cho div cha "đủ cao" để div dính "trượt qua" nội dung khác như bạn cuộn xuống

Vì vậy, trong trường hợp của tôi, ngay sau div div, tôi đã phải thêm:

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

(Ứng dụng của tôi có hai div bên cạnh nhau, với hình ảnh "cao" ở bên trái và biểu mẫu nhập dữ liệu ngắn ở bên phải và tôi muốn biểu mẫu nhập dữ liệu nổi bên cạnh hình ảnh khi bạn cuộn xuống, Vì vậy, biểu mẫu luôn ở trên màn hình. Nó sẽ không hoạt động cho đến khi tôi thêm "nội dung bổ sung" ở trên để div dính có gì đó để "trượt qua"

ĐÚNG rằng overflowcần phải loại bỏ hoặc thiết lập initialđể thực hiện position: stickycác tác phẩm trên phần tử con. Tôi đã sử dụng Thiết kế Vật liệu trong ứng dụng Angular của mình và phát hiện ra rằng một số thành phần Vật liệu đã thay đổi overflowgiá trị. Cách khắc phục cho kịch bản của tôi là

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