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

【问题标题】：Sticky sidebar for wordpress blog using only CSS?仅使用 CSS 的 wordpress 博客的粘性侧边栏？
【发布时间】：2015-06-25 02:01:35
【问题描述】：

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

示例：“热门故事边栏”https://news.google.com/ - “Mo 地图边栏”http://www.yelp.com/search?find_desc=restaurants&find_loc=San+Francisco%2C+CA&ns=1

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

提前致谢！

【问题讨论】：

标签： javascript jquery css wordpress sidebar

【解决方案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>

【讨论】：

感谢您的链接，我会在学习 javascript/jquery 时学习它

【解决方案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>

【讨论】：

抱歉回复晚了，但非常感谢。它不能完全按照我的意愿工作，但它在一天结束时很有创意，而且你让它很容易理解，所以在我更深入地学习 javascript 之前，我可能最终会采用这种方式。