Question

我的粘贴标题有问题：当我向下滚动时它表现正常但是当我一直向上滚动时它不会回到它的起始位置，而是看起来与下面的div重叠。我真的不明白问题的来源，所以任何帮助都会非常感谢，谢谢。

以下是代码：

＆＃13;

        
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky)
  {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

＆＃13;

.header {
  padding: 10px 16px;
  background: #1919ff;
  color: #f1f1f1;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

#about {
  background-color: #ccccff;
  height: 400px;
  width: 67%;
  margin: auto;
  box-sizing: border-box;
}

.round-border{
   border-radius: 50%;
  }
.portrait-image{
    width: 25%;    
  }
.header-bar{
    height: 4px;
    width: 80%;
    background: #272C31;
    margin-left: 20%;
    margin-top: 3%;
}

#image-position {
  float: right;
  margin: 8% 6% 0 0;
}
#text {
  float: left;
  text-align: right;
  width: 57%;
  word-break: break-all;
  margin-top: 11%;
  margin-left: 7%;
}

p.medium {
    font-size:135%;
    line-height: 1.5;
}

.clearfix {
  overflow: auto;
}

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css"> .icon {background:none;} </style>

<body style="background-color: #5D6D7E;">
  <div class="header" id="myHeader">
    <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx</h2>
  </div>
  <div id="about" class="clearfix">
    <div id="text">
      <p class="medium">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <br/>
      <div class="header-bar"></div>
      <br/>
      <br/>
      <h4 style="font-size:150%;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h4>
    </div>
    <img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
  </div>
  
</body>

＆＃13;

Answer 1

条件应在窗口滚动功能中以window.pageYOffset > sticky而不是window.pageYOffset >= sticky进行测试......

https://www.codeply.com/go/Qm2vXNiCvh

        
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  // Get the offset position of the navbar
  var sticky = header.offsetTop;

  if (window.pageYOffset > sticky)
  {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

.header {
  padding: 10px 16px;
  background: #1919ff;
  color: #f1f1f1;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

#about {
  background-color: #ccccff;
  height: 400px;
  width: 67%;
  margin: auto;
  box-sizing: border-box;
}

.round-border{
   border-radius: 50%;
  }
.portrait-image{
    width: 25%;    
  }
.header-bar{
    height: 4px;
    width: 80%;
    background: #272C31;
    margin-left: 20%;
    margin-top: 3%;
}

#image-position {
  float: right;
  margin: 8% 6% 0 0;
}
#text {
  float: left;
  text-align: right;
  width: 57%;
  word-break: break-all;
  margin-top: 11%;
  margin-left: 7%;
}

p.medium {
    font-size:135%;
    line-height: 1.5;
}

.clearfix {
  overflow: auto;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css"> .icon {background:none;} </style>

<body style="background-color: #5D6D7E;">
  <div class="header" id="myHeader">
    <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx</h2>
  </div>
  <div id="about" class="clearfix">
    <div id="text">
      <p class="medium">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <br/>
      <div class="header-bar"></div>
      <br/>
      <br/>
      <h4 style="font-size:150%;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h4>
    </div>
    <img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
  </div>
  
</body>

粘性标题不会一直向上滚动（重叠下面的div）

1 个答案: