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

Sticky sidebar for wordpress blog using only CSS?

本文关键字：侧边栏 wordpress CSS 更新时间：2023-09-26

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

示例："热门故事提要栏"https://news.google.com/-"Mo地图边栏"http://www.yelp.com/search?find_desc=restaurants&find_loc=旧金山+2C+CA&ns=1

问题是，"位置：粘性；"在一些主要的浏览器上不支持，所以我想避免使用它。有没有其他只使用CSS的方法？我还没有开始学习javascript，但如果有人能为我指明从哪里开始学习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>