Shulou(Shulou.com)06/01 Report--

Wonderful, make changes to the original program:

/ / when box scrolls, scroll to a certain distance. Top shows var box = document.querySelector ('.box') var top = document.querySelector ('.top') var neir = document.querySelector ('.neir') var toll = document.querySelector ('.bike') var rightlan = document.querySelector ('.rightlan') document.addEventListener ('scroll'') Function () {if (window.pageYOffset > = 100) {/ / sidebar fixed rightlan.style.top = 100 + box.scrollTop + 'px' toll.children [2] .style.display =' block' / / z attention level index. } else {toll.children [2] .style.display = 'none'}})

It can be realized. Just forgot to change the box to a fixed position.

If (window.pageYOffset > = 100) {/ / the sidebar holds rightlan.style.position = 'fixed' rightlan.style.top =' 100px' rightlan.style.right = '0px' toll.children [2] .style.display =' block' / / z attention level index. } else {toll.children [2] .style.display = 'none'}})

Document span {display: none; position: absolute; bottom: 0px}. Slider-bar {width: 40px; height: 100px; background-color: grey; position: absolute; top: 360px } .header, .banner, .main {width: 700px; height: 200px; margin-top: 30px; margin-left: 80px} .header {background-color: red;} .banner {background-color: blue } .main {background-color: skyblue Height: 1900px} returns the top head area banner area body part var slider = document.querySelector ('.slider-bar') var banner = document.querySelector (' .banner') slider.style.left = banner.offsetLeft + banner.offsetWidth + 'px' var a = banner.offsetTop / / must be written in front of the scroll Otherwise, var goback = document.querySelector ('.goback') / / the value that should be changed after the sidebar is fixed var b = slider.offsetTop-banner.offsetTop var main = document.querySelector ('.main') / / the height of the body relative to the page var c = main.offsetTop / / the page scrolling event document.addEventListener ('scroll' Function () {console.log (window.pageYOffset) / / when the header of the page that is rolled out is greater than or equal to 262 The sidebar is changed to fixed positioning if (window.pageYOffset > = a) {slider.style.position = 'fixed' / / the effect will jump because after changing to fixed positioning, the top value or 360px will not change when slider.style.top = b +' px'} / / is less than Change to absolute positioning else {slider.style.position = 'absolute' / / the effect will jump because after changing to absolute positioning, it still retains the top value of fixed positioning / / modifies the top value slider.style.top = 360 +' px'} / / when the page scrolls to the main part Goback displays if (window.pageYOffset > = c) {goback.style.display = 'block'} / / otherwise else {goback.style.display =' none'}} is not displayed)

Fixed: fixed positioning: the element is moved out of the normal document flow, leaving no space for the element, but by specifying the location of the element relative to the on-screen viewport (viewport). The position of the element does not change as the screen scrolls. When printing, the element appears in a fixed position on each page of.

Using viscous positioning, the slider is processed so that there is no need to judge the scrolling distance to modify the positioning of the slider. Instead, as soon as the page scrolls, the position property of slider is set to sticky positioning, and when it reaches a certain distance from the top of the page, it is fixed in a certain position on the page. Can achieve the same effect.

Var slider = document.querySelector ('.slider-bar') var banner = document.querySelector (' .banner') slider.style.left = banner.offsetLeft + banner.offsetWidth + 'px' var a = banner.offsetTop / / be sure to write on the front of the scroll Otherwise, var goback = document.querySelector ('.goback') / / the value that should be changed after the sidebar is fixed var b = slider.offsetTop-banner.offsetTop var main = document.querySelector ('.main') / / the height of the body relative to the page var c = main.offsetTop / / the page scrolling event document.addEventListener ('scroll' Function () {console.log (window.pageYOffset) / / when the header of the page that is rolled out is greater than or equal to 262 The sidebar is changed to fixed positioning / / if (window.pageYOffset > = a) {/ / banner begins to appear and is set to sticky positioning. / / slider.style.position = 'fixed' / / the effect will jump because after changing to fixed positioning, the top value is still the same / / slider.style.top = b +' px' / /} slider.style.position = 'fixed' slider.style.top = banner.offsetHeight-slider.offsetHeight +' px' / / less than It is changed to absolute positioning if (window.pageYOffset

< a) { slider.style.position = 'absolute' //效果会跳一下 这是因为改为绝对定位后，还保留了固定定位时候的top值 //修改top值 slider.style.top = 360 + 'px' } //页面滚动到主体部分时候，goback显示出 if (window.pageYOffset >

= c) {goback.style.display = 'block'} / / otherwise else {goback.style.display =' none'}} will not be displayed)

Sticky: sticky positioning. The element is relatively positioned before crossing a specific threshold and then fixed.

# one {position: sticky; top: 10px;}

Before the viewport viewport scrolls to the element top distance less than 10px, the element is relatively positioned. After that, the element is fixed at a distance from the top to the 10px until the viewport viewport rolls back below the threshold.

The disadvantage is that the compatibility is poor, at that time, the class said to understand, did not use much. It is much more convenient than writing in JS.

Use sticky positioning to implement. But I don't know how the first one is realized. When the two dt are separated by a certain distance, the above dt cancels the sticky location.

Document article {max-width: 600px; margin: 1em auto} article h5, article footer {position:-webkit-sticky; position: sticky;} article h5 {margin: 2em 00; background-color: # 333; padding: 10px Color: # fff; top: 0px; z-index: 1} article content {display: block; background-color: # ffffe0; position: relative; padding: 1px 10px} article footer {background-color: # f0f3f9 Padding: 10px; z-index:-1; bottom: 50vh} 1234

one hundred and twenty three.

Comment 1234

2323

Comment 1234

2323

Comment 1234

2323

Comment 1234

2323

Comment 1234

2323

Comment 1234

2323

Comment 1234

2323

Comment 1234

2323

Thank you for reading this article carefully. I hope the article "how to imitate Taobao to achieve fixed right sidebar" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.