當我在頁面上滾動時，我的圖像會跳動

Question

我希望有人能幫幫忙。

我在一個我被要求制作的慈善網站上玩耍，但是當我在頁面上滾動時，圖像一直在跳躍。

正如你在這里看到的

有誰知道為什么會這樣？

忽略該站點的 rest，因為我仍在研究如何解決其他問題。

我對編碼很陌生

HTML（我只添加了幾張照片，有很多）：

<!-- NAVIGATION -->
<table class="topnav" id="navigation" cellspacing="2">
   <tr>
     <td><a href="news.html"> Newsletters </a></td>
     <td><a href="events.html"> Fundraisers </a></td>
     <td><a href="index.html"> About us </a></td>
     <td><a href="widows.html"> The widows </a></td>
     <td><a href="helping.html"> What we do </a></td>
     <td><a href="donate.html"> Donate </a></td>
     <td><a href="contact.html"> Contact us </a></td>
     <td><a href="gallery.html"> Gallery </a></td>
   </tr>
</table>

<!-- GALLERY -->

<div id="myBtnContainer" class="btndiv">
   <button class="btn active" onclick="filterSelection('all')"> Show all</button>
   <button class="btn" onclick="filterSelection('widows')"> Photos of Widows</button>
   <button class="btn" onclick="filterSelection('videos')"> Videos of Widows </button>
   <button class="btn" onclick="filterSelection('events')"> Charity events</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">

   <div class="column widows" class="onecol">
     <div class="content">
       <img src="gallery/images/widows/16.png" alt="widows">
     </div>
   </div>

</div>

<div class="row">

   <div class="column widows">
     <div class="content">
       <img src="gallery/images/widows/20.png" alt="widows" style="width:100%">
     </div>
   </div>

   <div class="column widows">
      <div class="content">
         <img src="gallery/images/widows/3.png" alt="widows" style="width:100%">
      </div>
   </div>

   <div class="column widows">
       <div class="content">
          <img src="gallery/images/widows/4.png" alt="widows" style="width: 100%;">
       </div>
   </div>

</div>

CSS：

 /* NAVIGATION BAR */

 .topnav {
   background-color: #ff9f80;
   overflow: auto;
   width: 100%;
   font-family: Perpetua, sans-serif;
   font-size: 120%;
   padding-left: 10%;
   padding-right: 10%;
 }

 /* NAVIGATION LINKS */

 .topnav a {
   color: #8b0000;
   display: block;
   float: left;
   padding: 5% 4%;
   text-align: center;
   text-decoration: none;
 }

 /* STICKY NAVIGATION BAR */

 .sticky {
   position: fixed;
   top: 0;
   width: 100%;
 }

 .sticky + .content {
   padding-top: 102px;
 }

 /* CHANGE COLOR WHEN HOVERING OVER NAVIGATION BAR */

 .topnav a:hover {
   background-color: #ffc6b3;
   color: #8b0000;
 }

 /* FONT FOR NAVIGATION LINKS */

nav {
   font-family: Perpetua, sans-serif;
}

/* GALLERY */

.btndiv {
   text-align: center;
 }

* {
   box-sizing: border-box;
 }

 /* CENTER WEBSITE */
 .main {
    max-width: 1000px;
    margin: auto;
  }


 .row {
    margin: 8px -16px;
  }

  /* PADDING BETWEEN COLUMNS */
  .row,
  .row > .column {
    padding: 8px;
  }

  /* THREE EQUAL COLUMS NEXT TO EACH OTHER */
  .column {
     float: left;
     width: 33.33%;
     display: none; /* Hide columns by default */
   }

   /* CLEAR FLOATS AFTER ROWS */ 
   .row:after {
      content: "";
      display: table;
      clear: both;
    }

  /* CONTENT */
 .content {
    background-color: white;
    padding: 10px;
  }

 /* The "show" class is added to the filtered elements */
 .show {
    display: block;
 }

/* Style the buttons */
.btn {
   border: none;
   outline: none;
   padding: 12px 16px;
   background-color: #ff9f80;
   cursor: pointer;
   border-radius: 15px 50px;
   font-size: 100%;
   color: #8b0000;
 }

 /* Add a grey background color on mouse-over */
.btn:hover {
   background-color: #ffc6b3;
}

/* Add a dark background color to the active button */
.btn.active {
   background-color: #b32d00;
   color: white;
 }

 /* IMAGE RESIZING */

 .onecol {
   position: fixed;
   width: 150%;
   margin-left: auto;
   margin-right: auto;
   display: block;
   column-span: all;
  }

JavaScript：

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
   var x, i;
   x = document.getElementsByClassName("column");
   if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements,     and remove the "show" class from the elements that are not selected
 for (i = 0; i < x.length; i++) {
   w3RemoveClass(x[i], "show");
   if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
   var i, arr1, arr2;
   arr1 = element.className.split(" ");
   arr2 = name.split(" ");
   for (i = 0; i < arr2.length; i++) {
      if (arr1.indexOf(arr2[i]) == -1) {
        element.className += " " + arr2[i];
      }
    }
  }

  // Hide elements that are not selected
  function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
      while (arr1.indexOf(arr2[i]) > -1) {
        arr1.splice(arr1.indexOf(arr2[i]), 1); 
      }
     }
     element.className = arr1.join(" ");
    }

   // Add active class to the current button (highlight it)
   var btnContainer = document.getElementById("myBtnContainer");
   var btns = btnContainer.getElementsByClassName("btn");
   for (var i = 0; i < btns.length; i++) {
     btns[i].addEventListener("click", function(){
       var current = document.getElementsByClassName("active");
       current[0].className = current[0].className.replace("active", "");
       this.className += "active";
      });
    }

Answer 1

如果您能更徹底地解釋您的問題，這可能會更有幫助。 據我了解，如果您希望圖像在滾動時具有粘性，可以使用粘性的 CSS 屬性

img.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

我遇到的另一個問題是，當您向下滾動時，您的表格標簽中會包含一個 class 粘性。 檢查發生這種情況的代碼。