[英]Sticky sidebar for wordpress blog using only CSS?
我试图在我的wordpress博客中设置侧边栏的样式，直到它触及小部件区域的底部，然后变得固定，以便在身体内容继续滚动时始终可见。
示例：“热门新闻边栏” https://news.google.com/ - “Mo Map Sidebar” http://www.yelp.com/search?find_desc=restaurants&find_loc=San+Francisco%2C+CA&ns=1
问题是，'位置：粘性;' 一些主流浏览器不支持，所以我想避免使用它。 是否有另一种方法只使用CSS执行此操作？ 我还没有开始学习javascript，但是如果有人可以指出我在哪里开始学习它以达到预期的效果，我愿意比计划更早开始。
提前致谢！
我认为如果你需要jQuery，你可以看看这个答案： 滚动时将对象固定到浏览器窗口的顶部
您需要使用以下命令将jquery库导入网站的<head></head> ：
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
追逐边栏是否可以接受？ 我知道你不太了解javascript，更不用说jquery，所以我会引导你完成它（曾经是一名教师）。
// the beginning part is just like css. To find something, // \\ | | / use CSS and wrap it $('inside here') // \\/ \\/ \\/ $('#superdiv').slideDown(800); // <----- slide down command, // set with 800 millisecond duration // certain words have a special meaning in javascript, // so we add '$' to the front to avoid errors // this variable is captured \\/ with css and stored as '$sidebar' var $sidebar = $("#superdiv"), $window = $(window), offset = $sidebar.offset(); // this gets the distance from our // sidebar to the top of the screen $window.scroll(function() { if ($window.scrollTop() > offset.top) { // if there is more space // than the distance scrolled $sidebar.stop().animate({ // stop the sidebar if it is moving, // then start animation marginTop: $window.scrollTop() - offset.top // slowly move the // sidebar to the new location }); } else { $sidebar.stop().animate({ // otherwise stop the animation and marginTop: 0 // bring the sidebar back to the top }); } });
body { background-color: lightblue; border: 0; margin: 0; padding: 0; } #superdiv { background-color: orange; position: absolute; left: 0px; width: 150px; padding: 10px; display: none; } #superpage { padding: 10px; } #masterdiv { padding-left: 170px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="masterdiv"> <div id="superdiv">This is your sidebar. <br> <br> <br> <br> <br>Your menu items <br> <br> <br> <br> <br> </div> <div id="superpage">Here's the page <br> <br> <br> <br> <br>1 <br> <br> <br> <br>2 <br> <br> <br> <br>3 <br> <br> <br> <br>4 <br> <br> <br> <br>5 <br> <br> <br> <br>6 <br> <br> <br> <br>7 <br> <br> <br> <br>8 <br> <br> <br> <br>9 <br> <br> <br> <br>10 <br> <br> <br> <br>11 <br> <br> <br> <br>12 <br> <br> <br> <br>13 <br> <br> <br> <br>14 <br> <br> <br> <br>15 <br> <br> <br> <br>16</div> </div>
如何仅使用 Vanilla JavaScript 和 CSS 使侧边栏变粘
[英]How To Make The Sidebar Sticky Using Vanilla JavaScript & CSS Only
带有JavaScript的粘性侧边栏-仅在指定的元素之前粘性
[英]Sticky Sidebar with JavaScript - Sticky only until specifed element
如何仅使用 HTML 和 CSS（无 JS）制作“粘性”导航栏？
[英]How to make a “sticky” navbar using only HTML and CSS (without JS)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.