Question

最近几天我一直在寻找问题的答案...没有解决。

当您滚动通过时，我希望导航栏（主页-新闻-联系人）内容粘贴在页面顶部（位置：粘性）

但是出于某种原因，它只是不想坚持下去。如果我在导航栏下面添加虚拟文本，当它遇到页面内容（帖子，小部件等）时，它将停留并停止

我真的不知道自己在做什么错，所以我把整个事情都发布了。我添加了一些评论，以便您知道正在做什么。

/* Neon Black stylesheet by w1ll12520114 */

/* ==== Basic stuff ==== */
body {
  background-color:#333;
  color:white;
  margin:0 auto;
  width:80%;
  font-family:Arial;
}

::selection {
  background: #9a009a;
}

::moz-selection {
  background: #9a009a;
}

a {
  text-decoration:none;
  color:grey;
  display:block;
  padding:5px;
}

a:visited, a:hover {
  color:white;
}

/* ==== Header ==== */
#header {
  background-color:#111;
  padding:10px;
  border-bottom:2px #000 solid;
}

/* ==== Top navbar ==== -- THE BUGGY PART */
#navbar {
  overflow: hidden;
  background-color: #222;
  border-bottom:2px #9a009a solid;
  margin-bottom:25px;
  position: sticky; // Doesnt works...
  top: 0;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover, a:active {
  background-color: #9a009a;
}

/* Left navbar -- The widgets you cant see because PHP stuff not working here */
* {
  box-sizing:border-box;
}

#left {
  float:left;
  width:30%;
}

#widget {
  margin-bottom:20px;
  background-color:#111;
  padding:20px;
  border-bottom:2px #222 solid;
}

#widget h3 {
  display: block;
  background-color: #222;
  margin:-20px -20px 10px -20px;
  padding: 7px 7px 7px 27px;
  border-bottom:2px #000 solid;
}

#widget a:visited, #widget a:hover, #post a:visited, #post a:hover{
  background-color:#333;
}

/* Articles -- The dummy articles */
#main {
  float:right;
  width:67%; /* The width is 60%, by default */
}

#post {
  margin-bottom:20px;
  background-color:#222;
  padding:10px;
  border-bottom:2px #111 solid;
}

#post h2 {
  display: block;
  background-color: #111;
  margin:-10px -10px 10px -10px;
  padding: 7px;
  border-bottom:2px #000 solid;
}

/* Footer -- ...That also doesnt works.. :( Removed it. */
#footer {
  font-size: 10px;
  margin-top: 50px;
  background-color:#111;
  padding:10px;
  border-bottom:2px #222 solid;
  bottom: 0;
}

/* The neon effect */
#widget:hover, #post:hover{
  border-bottom:2px magenta solid;
}

/* For mobile devices */
@media screen and (max-width:600px) {
  #left, #main {
    width:100%;
  }
}
@media screen and (max-width:800px) {
  body, .sticky {
    width:95%;
  }
}

<?php include 'core/config.php';?>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" charset="utf-8">
<link rel="stylesheet" type="text/css" href="public/theme/<?php echo $theme?>/<?php echo $theme?>.css">
<title><?php echo $blogname?>: Home</title>
</head>
<body>

<div id="header">
<h2><?php echo $blogname?></h2>
<h4><?php echo $blogdesc?></h4>
</div>


<!-- Buggy navbar.. -->
<div id="navbar">
  <a id="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div id="left">
<?php include('public/widget.php');?>
</div>

<div id="main">
<div id="post">
<h2>Cats are awesome...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="post/article1.html">Continue reading...</a>
</div>
<div id="post">
<h2>And so are you!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="post/article2.html">Continue reading...</a>
</div>
<div id="post">
<h2>More text...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="post/article3.html">Continue reading...</a>
</div>
<div id="post">
<h2>Cats are awesome...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="post/article1.html">Continue reading...</a>
</div>
<div id="post">
<h2>And so are you!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="post/article2.html">Continue reading...</a>
</div>
<div id="post">
<h2>More text...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="post/article3.html">Continue reading...</a>
</div>
</div>

</body>
</html>

我在做什么错..？

我那里没有显示器：tables / flex ...我真的不知道是什么引起了问题。

我也想出了一些JavaScript解决方案，但它们在野生动物园浏览器上确实存在问题。我可以根据需要将其发布，因此每个人都看到ive尝试并尝试使此工作成功..：P

谢谢：）

位置：粘性确实不起作用

0 个答案:

位置：粘性*确实*不起作用

0 个答案:

位置：粘性确实不起作用