我需要只在鼠标悬停在滚动条上时修复具有 980px 宽度 和 500px 高度 (class="main") 的网站的主要部分div 的 height 为 1500px,width 为 100% (class="container-scroll"),它位于其他 div 中,height 为 500px. (class="container")
I need to make the main of my site that has 980px width and 500px height (class="main") be fixed only when the mouse is over a scrolling div and has a height of 1500px and a width of 100% (class="container-scroll"), that is inside other div with height of 500px. (class="container")
很困惑,对吧?
我做了一个fiddle,我快到了,问题是如果我将main设置为fixed,它会随着页面滚动,而不仅仅是div内部
I made a fiddle, I'm almost there, the problem is that if I set up the main to fixed, it will scroll with the page , not just inside the div
这是我的小提琴:jsfiddle/8oj0sge4/1/embedded/result/
HTML:
<div id="wrapper"> <div class="container"> <div class="container-scroll"> <div class="main"> </div> </div> </div> </div>CSS:
#wrapper { width: 100%; height: 1500px; border: 1px solid red; padding-top: 380px; } #wrapper .container { border: 1px solid green; width: 100%; height: 500px; overflow: scroll; } #wrapper .container-scroll { height: 1500px; width: 100%; border: 1px solid yellow; } #wrapper .main { width: 980px; height: 500px; background: black; overflow: scroll; /*position: fixed;*/ } 推荐答案如果我理解正确的话,你希望主 div 保持在父 div 的顶部吗?
If I'm understanding this correctly, you want the main div to stay on the top of the parent div?
小提琴:jsfiddle/8oj0sge4/3/ (完整)
所做的更改:
- #wrapper .main:添加了position:absolute(固定"到父级)
- #wrapper .container-scroll:添加 position: relative(确定要修复"到哪个父级)
- 在主 div 中添加了一个 id(为方便起见)
- #wrapper .main: Added position:absolute ("fixed" to parent)
- #wrapper .container-scroll: Added position: relative (determines what parent to "fix" to)
- Added an id to the main div (for convenience)
JavaScript 代码:
JavaScript code:
var main = document.getElementById('main-site'); var maxTop = main.parentNode.scrollHeight-main.offsetHeight; // Make sure we don't go outside the parent main.parentNode.parentNode.onscroll = function() { main.style.top = Math.min(this.scrollTop,maxTop) + "px"; }更多推荐
修复了滚动 div 内的 div
发布评论