仅使用CSS的WordPress博客的粘性边栏？

我试图在我的WordPress博客中设置侧边栏的样式，直到它到达小部件区域的底部，然后变得固定，以便在正文内容继续滚动时始终可见。仅使用CSS的WordPress博客的粘性边栏？

例子： '最新新闻边栏' https://news.google.com/ - '莫地图侧边栏' http://www.yelp.com/search?find_desc=restaurants&find_loc=San+Francisco%2C+CA&ns=1

的问题是， '位置：粘;'在几个主流浏览器上不支持，所以我想避免使用它。有没有一种替代方法仅使用CSS来完成此操作？我还没有开始学习JavaScript，但是如果有人能够指示我从哪里开始学习它以达到期望的效果，我愿意比计划更快地开始。

在此先感谢！

来源

2015-06-25 Tre

是一个追逐边栏可以接受吗？我知道你不太了解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>

来源

2015-06-25 03:04:29 oMiKeY

很抱歉这么晚才回复，但非常感谢这一点。它并不像我想要的那样工作，但它在一天结束时的创意并且让你很容易理解，所以这就是我可能最终要做的事情，直到我更深入地学习JavaScript为止。 – Tre

我认为，如果你需要jQuery的你可以看看这个答案： Fix object to top of browser window when scrolling

您需要使用到jQuery库导入到你的网站的 <head></head> ：

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head>

来源

2015-06-25 02:18:04 Matt

感谢您的链接，我会研究它，因为我学习JavaScript/jQuery的 – Tre

仅使用CSS的WordPress博客的粘性边栏？

回答

相关问题