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

Question

我正在尝试将我的 wordpress 博客中的侧边栏样式设置为滚动，直到它到达小部件区域的底部，然后固定，以便它在正文内容继续滚动时始终可见。

示例：'Top Stories Sidebar' https://news.google.com/ - 'Mo Map Sidebar' http://www.yelp.com/search?find_desc=restaurants&find_loc=San+Francisco%2C+CA&ns=1

问题是，一些主流浏览器不支持 'position: sticky;'，所以我想避免使用它。是否有仅使用 CSS 的替代方法？我还没有开始学习 javascript，但如果有人能指出我从哪里开始学习它以获得预期效果，我愿意比计划的更早开始。

提前致谢！

Answer 1

我想如果你需要 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>

Answer 2

追逐侧边栏是否可以接受？我知道你对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>

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

Sticky sidebar for wordpress blog using only CSS?

javascript

css

wordpress

jquery

sidebar