sticky

问题 I am using position: sticky; for my header, but it does not seem to work. The error is that the navigation bar doesn't stay in place when I scroll down, like it should with position: sticky set. * { margin: 0px; } nav { width: 100%; background-color: white; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32); } #navigation { list-style-type: none; padding: 0px; margin: 0px; } li { display: inline-block; padding: 0px; font-family: Antonio; font-size: 3em; padding-left: 5px; padding-right: 5px; padding

问题 This is a question when I read an article on the MDN position property. I thought that there was a clear difference between the behavior of sticky described there and the actual behavior. According to the MDN, fixed position elements are treated as relative position elements until the specified threshold is exceeded, and when the threshold is exceeded, they are treated as fixed position elements until the boundary of the parent element is reached (Link). Sticky positioning can be thought of

问题 I have a webpage with two columns. I want to stick a div in the left column until the user scrolls down to an specific end of an element in the right column. I´m trying to use the Jquery library Sticky-kit http://leafo.net/sticky-kit/ . I´m able to stick the div, but I cannot release it when I hit the end of the element of the right column. The Jquery code is inside an AngularJS directive (although I think it doesn´t affect to the problem). Find a plunker: https://plnkr.co/edit

问题 I want to have the width of a position: fixed div (because I want it to be able independently of page scrolling) equal to the width of its parent ( a td element ). However I cannot seem to achieve that. My current code is: html: <table style="width: 90%; border: 1px solid black;"> <tr> <td id='tdLeft'> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd

问题 This question already has an answer here : Why is 'position: sticky' not working with Core UI's Bootstrap CSS (1 answer) Closed 9 months ago . I'm trying to create a sticky sidebar on the right. The sidebar menu is inside a grid column. I'm using the sticky-top class as shown in this question, but it still doesn't work. Here's the code... <div class="container min-vh-100 overflow-hidden"> <nav class="navbar navbar-light navbar-expand"> <a class="navbar-brand" href="#">Brand</a> <ul class=

问题 It is possible to have 2 sticky elements on top of each other? Or use one of them as a background? TLDR; I was able to make this work with a library (StickyKit) that does what I'm looking for, but performs badly with new async scrolling. Example JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (this does what I'm describing, but performs poorly, see below) How I did it: I wrapped sticky elements in the 200% wrapper, and floated them to left . Then I moved 1 of them ( margin

问题 It is possible to have 2 sticky elements on top of each other? Or use one of them as a background? TLDR; I was able to make this work with a library (StickyKit) that does what I'm looking for, but performs badly with new async scrolling. Example JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (this does what I'm describing, but performs poorly, see below) How I did it: I wrapped sticky elements in the 200% wrapper, and floated them to left . Then I moved 1 of them ( margin

问题 According to CanIUse, there is a known issue with Safari and position:sticky inside an overflow:auto element: A parent with overflow set to auto will prevent position: sticky from working in Safari However, this is the exact use case that I need. I have a scrollable div, which is subdivided into two columns. The right column should be sticky and never move, even when the entire div is scrolled. The reason I'm using position:sticky on the right column is that I want the user to be able to

问题 I have a two column layout where I want the right column to be position: sticky so it stays in view while scrolling the longer left column. These are two bootstrap columns, so the first thing I had to do was remove the floats (and instead am using display: inline-block ). This works just fine on its own, or near the top of the DOM of this particular page, but in the rendered location (which, alas, is some 30 or so divs deep...don't ask...) I can't get it to work. Both columns just keep on

问题 I thought of 2 different methods to approaching this, but I need assistance. Scroll to section and then stick. Hide element while scrolling, then unhide element once you have reached point on page. How can I do this? I'm using stickyjs currently. But I don't see a feature for doing what I asked. 回答1: demo - http://jsfiddle.net/m6q6j8xL/3/ this is custom js in this demo the header changes to green( fixed ) and when you reach to blue div changes back to normal and when u are out from the blue