由于下面的内容，粘性导航栏停止工作

Question

我有这个带 position: sticky 的导航栏，但是当它到达侧导航和页面内容的顶部时它停止了。我无法将 position 更改为 fixed，因为这样上面的 .ad 将不可见。我已经添加了属于侧面导航和内容的脚本。如何让我的导航栏继续，越过内容和侧面导航？

function sortBooks(upDown) {

        var columns = document.getElementsByClassName("column")

        function pricesToArray(columns) {
            var prices = [];
            for (var index = 0; index < columns.length; index++) {
                var price = columns[index].querySelector('.price').innerText;
                var priceInt = price.substr(1, price.length).replace(',', '.');
                prices[index] = parseFloat(priceInt, 10);
            }
            return prices;
        }

        var prices = pricesToArray(columns);

        function selectionSort(arr, upDown) {
            var minIdx, temp,
                len = arr.length;
            for (var i = 0; i < len; i++) {
                minIdx = i;
                for (var j = i + 1; j < len; j++) {
                    if (upDown) {
                        if (arr[j] < arr[minIdx]) {
                            minIdx = j;
                        }
                    } else {
                        if (arr[j] > arr[minIdx]) {
                            minIdx = j;
                        }
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIdx];
                //replace columns
                replaceColumns(i,minIdx);
                arr[minIdx] = temp;
            }
            return arr;
        }

        function replaceColumns(i,minIdx) {
            var temporaryColumn = columns[i].innerHTML;
            columns[i].innerHTML = columns[minIdx].innerHTML;
            columns[minIdx].innerHTML = temporaryColumn;
        }

        var pricesSorted = selectionSort(prices,upDown);

    }

function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("h4");
    // Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      // start by saying there should be no switching:
      shouldSwitch = false;
      /* check if the next item should
      switch place with the current item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark the switch as done: */
      b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
      switching = true;
    }
  }
}


/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}

var coll = document.getElementsByClassName("collapsible2");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}  

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

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];}
  }
}

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("activee");
    current[0].className = current[0].className.replace(" activee", "");
    this.className += " activee";
  });
}  


function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

body {
    margin: 0;
    background-color: #fcf3e3;
    }
* {box-sizing: border-box;}
.navbar {
    list-style-type: none;
    background-color: #f9eedd;
    width: 100%;
    margin: 0;
    padding: 0 20%;
    z-index: 10;
    position: sticky;
    top: 0;
    height: 7vmin;
    }
.navbar li a{
    display: block;
    color: #8e8275;
    text-decoration: none;
    padding: 1.5vmin 1vmin 1.2vmin 1vmin;
    margin: 1.3vmin;
    }
.navbar li.links {float: left;}
.navbar li.rechts {float: right;}
.navbar li a:hover {color: #252118;}
.navbar .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fef6e9;
    min-width: 13vmin;
    z-index: 10;
    top: 7vmin;
    margin: 0 2vmin;
    }
.navbar .dropdown-content a {
    text-align: left;
    margin: 0;
    padding: 1.5vmin 1.3vmin;
    }
.navbar li.icon {display: none;}
.ad {
    background-color: #fbf4e9;
    text-align: center;  
    font-size: 1.5vmin;
    padding: .5vmin;
    }
.webshoptekst {
    margin: 5vmin 10% 0 10%;
    }
.row {margin-left: 27vmin;}
.column {
    float: left;
    display: none;
    padding: 0 1.5vmin 1.5vmin 0;
    width: 33.3%;
    }
.kaartje {
    background-color: #FFFF;
    padding: 1.2vmin;
    text-align: center;
    max-width: 20vmin;
    height: 40vmin;
    position: relative;
    }
.kaartje div {height: 18vmin;}  
.kaartje div > img {height: 100%;} 
h4 {
    margin: 0;
    font-size: 1.9vmin;
    min-height: 6vmin;
    }
h6 {
    margin: 0;
    font-size: 1.4vmin;
    font-weight: normal;
    }
.price {
    color: #777676;
    margin-top: .8vmin;
    font-size: 1.4vmin;
    }
.winkelwagen{
    bottom: 0;
    position: absolute;
    left: 0;
    padding: 1.2vmin;
    width: 100%;
    }
.kaartje button {
    border: none;
    outline: none;
    padding: 1vmin;
    color: #FFFF;
    background-color: #000;
    cursor: pointer;
    font-size: 1vmin;
    }
.kaartje button:hover {opacity: 0.7;}
.show {display: block;}

.sidenav {
    width: 25vmin;
    float: left;
    box-shadow: 0px 1px 3px 0px #c4b29c;
    }
.dropdown-btn {
    padding: .6vmin .8vmin .6vmin 1.6vmin;
    font-size: 2.5vmin;
    color: #655f5a;
    border: none;
    background-color: #f5e8d2;
    cursor: pointer;
    outline: none;
    width: 100%;
    text-align:left;
    }
.dropdown-container {
    display: none;
    background-color: #efe6d8;
    padding-left: .8vmin;
    }

.collapsible2 {
    outline: none;
    border: none;
    color: #655f5a;
    background-color: #efe6d8;
    cursor: pointer;
    width: 24vmin;
    font-size: 2.4vmin;
    text-align: left;
    padding: .6vmin .8vmin .6vmin 1.6vmin;
    }
.dropdown-btn:hover, .collapsible2:hover {opacity: 0.7;}
.collapsible2:after {
    content: '[=11=]2B';
    float: right;
    }
.collapsible2 .active:after {content: "12";}
.ccontent {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);
    padding-left: .8vmin;
    }
.btn {
    display: block;
    position: relative;
    padding-left: 3.5vmin;
    margin-bottom: 1.2vmin;
    cursor: pointer;
    font-size: 1.8vmin;
    }
.btn input {display: none;}
.checkmark {
    position: absolute;
    left: 0;
    height: 2vmin;
    width: 2vmin;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: inset 0 0 4px 0px #b5a99b;
    }
.btn:hover input ~ .checkmark {background-color: #dcdcdc;}
.btn.activee input:checked ~ .checkmark {background-color: #cccccc;}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    }
.btn input:checked ~ .checkmark:after {display: block;}
.btn .checkmark:after {
    top: 0.68vmin;
    left: 0.68vmin;
    width: 0.64vmin;
    height: 0.64vmin;
    border-radius: 50%;
    background: #98948e;
    }

<div class="ad">Lorem ipsum dolor sit amet, consec</div>

    <ul class="navbar" id="myTopnav">
    <li class="links"><a href="index.html">adipiscing</a></li>
    <li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>
       <div class="dropdown-content">
        <a href="javascript:void(0)">Loren</a>
        <a href="javascript:void(0)">ipsum</a></div>      </li>
    <li class="rechts"><a href="over-mij.html">sed</a></li>
    <li class="rechts"><a href="webshop.html" class="active">do</a></li>
    <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>

     <div class="webshoptekst">  
      <h1>do</h1>
       <p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="sidenav">      
  <button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>
  <div class="dropdown-container" id="myBtnContainer">


<button type="button" class="collapsible2">Sorteren op</button>
               <div class="ccontent">
                <label class="btn activee" onclick="filterSelection('all')">Toon alles<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span class="checkmark"></span></label>
               </div>      

<button type="button" class="collapsible2">Talen</button>
               <div class="ccontent">
                <label class="btn" onclick="filterSelection('Nederlands')">Dutch<input type="radio" name="radio"><span class="checkmark"></span></label>
                <label class="btn" onclick="filterSelection('Engels')">Engels<input type="radio" name="radio"><span class="checkmark"></span></label>  
               </div>

  </div>
</div>  


<div class="row" id="id01">

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopOT.jpg" alt="Oliver Twist"></div>
      <h4>Oliver Twist</h4>
      <h6>Charles Dickens</h6>
      <p class="price">€9,99</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>
      <h4>The Complete Short Stories</h4>
      <h6>Edgar Allan Poe</h6>
      <p class="price">€7,98</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>
      <h4>Romeo en Julia</h4>
      <h6>William Shakespeare</h6>
      <p class="price">€14,55</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
      <h4>Harry Potter en de Steen der Wijzen</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€16,58</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>
      <h4>Harry Potter en de Geheime Kamer</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€17,19</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
      <h4>Harry Potter en de Gevangene van Azkaban</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€17,97</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column Nederlands">
    <div class="kaartje">
      <div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>
      <h4>Harry Potter en de Vuurbeker</h4>
      <h6>J. K. Rowling</h6>
      <p class="price">€18,43</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div> 

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopABP.jpg" alt="All the Bright Places"></div>
      <h4>All the Bright Places</h4>
      <h6>Jennifer Niven</h6>
      <p class="price">€13,29</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

  <div class="column English">
    <div class="kaartje">
      <div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>
      <h4>The Fault in our Stars</h4>
      <h6>John Green</h6>
      <p class="price">€11,55</p>
      <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
    </div>
  </div>  

</div>
</div>

Answer 1

由于<div class="row">的内容都是浮动的，所以没有高度。将 overflow: auto; 添加到它，您的导航将正确粘贴。

function sortBooks(upDown) {

  var columns = document.getElementsByClassName("column")

  function pricesToArray(columns) {
    var prices = [];
    for (var index = 0; index < columns.length; index++) {
      var price = columns[index].querySelector('.price').innerText;
      var priceInt = price.substr(1, price.length).replace(',', '.');
      prices[index] = parseFloat(priceInt, 10);
    }
    return prices;
  }

  var prices = pricesToArray(columns);

  function selectionSort(arr, upDown) {
    var minIdx, temp,
      len = arr.length;
    for (var i = 0; i < len; i++) {
      minIdx = i;
      for (var j = i + 1; j < len; j++) {
        if (upDown) {
          if (arr[j] < arr[minIdx]) {
            minIdx = j;
          }
        } else {
          if (arr[j] > arr[minIdx]) {
            minIdx = j;
          }
        }
      }
      temp = arr[i];
      arr[i] = arr[minIdx];
      //replace columns
      replaceColumns(i, minIdx);
      arr[minIdx] = temp;
    }
    return arr;
  }

  function replaceColumns(i, minIdx) {
    var temporaryColumn = columns[i].innerHTML;
    columns[i].innerHTML = columns[minIdx].innerHTML;
    columns[minIdx].innerHTML = temporaryColumn;
  }

  var pricesSorted = selectionSort(prices, upDown);

}

function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // start by saying: no switching is done:
    switching = false;
    b = list.getElementsByTagName("h4");
    // Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      // start by saying there should be no switching:
      shouldSwitch = false;
      /* check if the next item should
      switch place with the current item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark the switch as done: */
      b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
      switching = true;
    }
  }
}


/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

var coll = document.getElementsByClassName("collapsible2");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

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];
    }
  }
}

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("activee");
    current[0].className = current[0].className.replace(" activee", "");
    this.className += " activee";
  });
}


function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

body {
  margin: 0;
  background-color: #fcf3e3;
}

* {
  box-sizing: border-box;
}

.navbar {
  list-style-type: none;
  background-color: #f9eedd;
  box-shadow: 0px 5px 5px -6px #c4b29c;
  font-family: Georgia, "Times New Roman", Serif;
  width: 100%;
  margin: 0;
  padding: 0 20%;
  z-index: 10;
  position: sticky;
  top: 0;
  height: 7vmin;
}

.navbar li a {
  display: block;
  color: #8e8275;
  text-decoration: none;
  transition: 0.3s;
  letter-spacing: .1vmin;
  font-size: 1.6vmin;
  padding: 1.5vmin 1vmin 1.2vmin 1vmin;
  margin: 1.3vmin;
}

.navbar li.links {
  float: left;
}

.navbar li.rechts {
  float: right;
}

.navbar li a:hover {
  color: #252118;
}

.navbar li a.active,
.navbar .dropdown-content a.active {
  text-decoration: underline
}

.navbar .dropdown-content a.active {
  background-color: #f3e9da;
}

.navbar .dropdown-content {
  display: none;
  position: absolute;
  background-color: #fef6e9;
  min-width: 13vmin;
  box-shadow: 0px 2px 5px .1px rgba(0, 0, 0, 0.2);
  z-index: 10;
  top: 7vmin;
  margin: 0 2vmin;
}

.navbar .dropdown-content a {
  text-align: left;
  margin: 0;
  padding: 1.5vmin 1.3vmin;
}

.navbar .dropdown-content a:hover {
  background-color: #f7eedc;
}

.navbar .dropdown:hover .dropdown-content {
  display: block;
}

.navbar li.icon {
  display: none;
}

.ad {
  background-color: #fbf4e9;
  text-align: center;
  font-size: 1.5vmin;
  padding: .5vmin;
}

.webshoptekst {
  letter-spacing: .06vmin;
  font-family: Arial, Verdana, Sans-serif;
  margin: 5vmin 10% 0 10%;
}

.row {
  margin-left: 27vmin;
  overflow: auto;
}

.column {
  float: left;
  display: none;
  padding: 0 1.5vmin 1.5vmin 0;
  width: 33.3%;
}

.kaartje {
  background-color: #FFFF;
  padding: 1.2vmin;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 20vmin;
  height: 40vmin;
  position: relative;
}

.kaartje div {
  height: 18vmin;
}

.kaartje div>img {
  height: 100%;
}

h4 {
  margin: 0;
  font-size: 1.9vmin;
  min-height: 6vmin;
}

h6 {
  margin: 0;
  font-size: 1.4vmin;
  font-weight: normal;
}

.price {
  color: #777676;
  margin-top: .8vmin;
  font-size: 1.4vmin;
}

.winkelwagen {
  bottom: 0;
  position: absolute;
  left: 0;
  padding: 1.2vmin;
  width: 100%;
}

.kaartje button {
  border: none;
  outline: none;
  padding: 1vmin;
  color: #FFFF;
  background-color: #000;
  cursor: pointer;
  font-size: 1vmin;
}

.kaartje button:hover {
  opacity: 0.7;
}

.show {
  display: block;
}

.sidenav {
  width: 25vmin;
  float: left;
  box-shadow: 0px 1px 3px 0px #c4b29c;
}

.dropdown-btn {
  padding: .6vmin .8vmin .6vmin 1.6vmin;
  font-size: 2.5vmin;
  color: #655f5a;
  border: none;
  background-color: #f5e8d2;
  cursor: pointer;
  outline: none;
  width: 100%;
  text-align: left;
}

.dropdown-container {
  display: none;
  background-color: #efe6d8;
  padding-left: .8vmin;
}

.collapsible2 {
  outline: none;
  border: none;
  color: #655f5a;
  background-color: #efe6d8;
  cursor: pointer;
  width: 24vmin;
  font-size: 2.4vmin;
  text-align: left;
  padding: .6vmin .8vmin .6vmin 1.6vmin;
}

.dropdown-btn:hover,
.collapsible2:hover {
  opacity: 0.7;
}

.collapsible2:after {
  content: '[=11=]2B';
  float: right;
}

.collapsible2 .active:after {
  content: "12";
}

.ccontent {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);
  padding-left: .8vmin;
}

.btn {
  display: block;
  position: relative;
  padding-left: 3.5vmin;
  margin-bottom: 1.2vmin;
  cursor: pointer;
  font-size: 1.8vmin;
}

.btn input {
  display: none;
}

.checkmark {
  position: absolute;
  left: 0;
  height: 2vmin;
  width: 2vmin;
  background-color: #eee;
  border-radius: 50%;
  box-shadow: inset 0 0 4px 0px #b5a99b;
}

.btn:hover input~.checkmark {
  background-color: #dcdcdc;
}

.btn.activee input:checked~.checkmark {
  background-color: #cccccc;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.btn input:checked~.checkmark:after {
  display: block;
}

.btn .checkmark:after {
  top: 0.68vmin;
  left: 0.68vmin;
  width: 0.64vmin;
  height: 0.64vmin;
  border-radius: 50%;
  background: #98948e;
}

<div class="ad">Lorem ipsum dolor sit amet, consec</div>

<ul class="navbar" id="myTopnav">
  <li class="links"><a href="index.html">adipiscing</a></li>
  <li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>
    <div class="dropdown-content">
      <a href="javascript:void(0)">Loren</a>
      <a href="javascript:void(0)">ipsum</a></div>
  </li>
  <li class="rechts"><a href="over-mij.html">sed</a></li>
  <li class="rechts"><a href="webshop.html" class="active">do</a></li>
  <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>

<div class="webshoptekst">
  <h1>do</h1>
  <p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div class="sidenav">
    <button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>
    <div class="dropdown-container" id="myBtnContainer">


      <button type="button" class="collapsible2">Sorteren op</button>
      <div class="ccontent">
        <label class="btn activee" onclick="filterSelection('all')">Toon alles<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span class="checkmark"></span></label>
      </div>

      <button type="button" class="collapsible2">Talen</button>
      <div class="ccontent">
        <label class="btn" onclick="filterSelection('Nederlands')">Dutch<input type="radio" name="radio"><span class="checkmark"></span></label>
        <label class="btn" onclick="filterSelection('Engels')">Engels<input type="radio" name="radio"><span class="checkmark"></span></label>
      </div>

    </div>
  </div>


  <div class="row" id="id01">

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopOT.jpg" alt="Oliver Twist"></div>
        <h4>Oliver Twist</h4>
        <h6>Charles Dickens</h6>
        <p class="price">€9,99</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>
        <h4>The Complete Short Stories</h4>
        <h6>Edgar Allan Poe</h6>
        <p class="price">€7,98</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>
        <h4>Romeo en Julia</h4>
        <h6>William Shakespeare</h6>
        <p class="price">€14,55</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
        <h4>Harry Potter en de Steen der Wijzen</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€16,58</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>
        <h4>Harry Potter en de Geheime Kamer</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€17,19</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
        <h4>Harry Potter en de Gevangene van Azkaban</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€17,97</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column Nederlands">
      <div class="kaartje">
        <div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>
        <h4>Harry Potter en de Vuurbeker</h4>
        <h6>J. K. Rowling</h6>
        <p class="price">€18,43</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopABP.jpg" alt="All the Bright Places"></div>
        <h4>All the Bright Places</h4>
        <h6>Jennifer Niven</h6>
        <p class="price">€13,29</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

    <div class="column English">
      <div class="kaartje">
        <div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>
        <h4>The Fault in our Stars</h4>
        <h6>John Green</h6>
        <p class="price">€11,55</p>
        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
      </div>
    </div>

  </div>
</div>

Answer 2

更好的解决方案在浮动内容后添加<div style="clear: both;"></div>。没有添加不必要的滚动条。在 float 之后放置 clear 的好习惯。

function sortBooks(upDown) {

    var columns = document.getElementsByClassName("column")

    function pricesToArray(columns) {
        var prices = [];
        for (var index = 0; index < columns.length; index++) {
            var price = columns[index].querySelector('.price').innerText;
            var priceInt = price.substr(1, price.length).replace(',', '.');
            prices[index] = parseFloat(priceInt, 10);
        }
        return prices;
    }

    var prices = pricesToArray(columns);

    function selectionSort(arr, upDown) {
        var minIdx, temp,
            len = arr.length;
        for (var i = 0; i < len; i++) {
            minIdx = i;
            for (var j = i + 1; j < len; j++) {
                if (upDown) {
                    if (arr[j] < arr[minIdx]) {
                        minIdx = j;
                    }
                } else {
                    if (arr[j] > arr[minIdx]) {
                        minIdx = j;
                    }
                }
            }
            temp = arr[i];
            arr[i] = arr[minIdx];
            //replace columns
            replaceColumns(i, minIdx);
            arr[minIdx] = temp;
        }
        return arr;
    }

    function replaceColumns(i, minIdx) {
        var temporaryColumn = columns[i].innerHTML;
        columns[i].innerHTML = columns[minIdx].innerHTML;
        columns[minIdx].innerHTML = temporaryColumn;
    }

    var pricesSorted = selectionSort(prices, upDown);

}

function sortList() {
    var list, i, switching, b, shouldSwitch;
    list = document.getElementById("id01");
    switching = true;
    /* Make a loop that will continue until
    no switching has been done: */
    while (switching) {
        // start by saying: no switching is done:
        switching = false;
        b = list.getElementsByTagName("h4");
        // Loop through all list-items:
        for (i = 0; i < (b.length - 1); i++) {
            // start by saying there should be no switching:
            shouldSwitch = false;
            /* check if the next item should
            switch place with the current item: */
            if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
                /* if next item is alphabetically
                lower than current item, mark as a switch
                and break the loop: */
                shouldSwitch = true;
                break;
            }
        }
        if (shouldSwitch) {
            /* If a switch has been marked, make the switch
            and mark the switch as done: */
            b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);
            switching = true;
        }
    }
}


/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
}

var coll = document.getElementsByClassName("collapsible2");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
}

filterSelection("all")
function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("column");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
    }
}

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]; }
    }
}

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("activee");
        current[0].className = current[0].className.replace(" activee", "");
        this.className += " activee";
    });
}


function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else {
        x.className = "navbar";
    }
}

body {
    margin: 0;
    background-color: #fcf3e3;
    }
* {box-sizing: border-box;}
.navbar {
    list-style-type: none;
    background-color: #f9eedd;
    box-shadow: 0px 5px 5px -6px #c4b29c;
    font-family: Georgia, "Times New Roman", Serif;
    width: 100%;
    margin: 0;
    padding: 0 20%;
    z-index: 10;
    position: sticky;
    top: 0;
    height: 7vmin;
    }
.navbar li a{
    display: block;
    color: #8e8275;
    text-decoration: none;
    transition: 0.3s;
    letter-spacing: .1vmin;
    font-size: 1.6vmin;
    padding: 1.5vmin 1vmin 1.2vmin 1vmin;
    margin: 1.3vmin;
    }
.navbar li.links {float: left;}
.navbar li.rechts {float: right;}
.navbar li a:hover {color: #252118;}
.navbar li a.active, .navbar .dropdown-content a.active {text-decoration: underline}
.navbar .dropdown-content a.active {background-color:#f3e9da;}
.navbar .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fef6e9;
    min-width: 13vmin;
    box-shadow: 0px 2px 5px .1px rgba(0,0,0,0.2);
    z-index: 10;
    top: 7vmin;
    margin: 0 2vmin;
    }
.navbar .dropdown-content a {
    text-align: left;
    margin: 0;
    padding: 1.5vmin 1.3vmin;
    }
.navbar .dropdown-content a:hover {background-color: #f7eedc;}
.navbar .dropdown:hover .dropdown-content {display: block;}
.navbar li.icon {display: none;}
.ad {
    background-color: #fbf4e9;
    text-align: center;  
    font-size: 1.5vmin;
    padding: .5vmin;
    }
.webshoptekst {
    letter-spacing: .06vmin;
    font-family: Arial, Verdana, Sans-serif;
    margin: 5vmin 10% 0 10%;
    }
.row {margin-left: 27vmin;}
.column {
    float: left;
    display: none;
    padding: 0 1.5vmin 1.5vmin 0;
  width: 33.3%;
    }
.kaartje {
    background-color: #FFFF;
    padding: 1.2vmin;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 20vmin;
    height: 40vmin;
    position: relative;
    }
.kaartje div {height: 18vmin;}  
.kaartje div > img {height: 100%;} 
h4 {
    margin: 0;
    font-size: 1.9vmin;
    min-height: 6vmin;
    }
h6 {
    margin: 0;
    font-size: 1.4vmin;
    font-weight: normal;
    }
.price {
    color: #777676;
    margin-top: .8vmin;
    font-size: 1.4vmin;
    }
.winkelwagen{
    bottom: 0;
    position: absolute;
    left: 0;
    padding: 1.2vmin;
    width: 100%;
    }
.kaartje button {
    border: none;
    outline: none;
    padding: 1vmin;
    color: #FFFF;
    background-color: #000;
    cursor: pointer;
    font-size: 1vmin;
    }
.kaartje button:hover {opacity: 0.7;}
.show {display: block;}

.sidenav {
    width: 25vmin;
    float: left;
    box-shadow: 0px 1px 3px 0px #c4b29c;
    }
.dropdown-btn {
    padding: .6vmin .8vmin .6vmin 1.6vmin;
    font-size: 2.5vmin;
    color: #655f5a;
    border: none;
    background-color: #f5e8d2;
    cursor: pointer;
    outline: none;
    width: 100%;
    text-align:left;
    }
.dropdown-container {
    display: none;
    background-color: #efe6d8;
    padding-left: .8vmin;
    }

.collapsible2 {
    outline: none;
    border: none;
    color: #655f5a;
    background-color: #efe6d8;
    cursor: pointer;
    width: 24vmin;
    font-size: 2.4vmin;
    text-align: left;
    padding: .6vmin .8vmin .6vmin 1.6vmin;
    }
.dropdown-btn:hover, .collapsible2:hover {opacity: 0.7;}
.collapsible2:after {
    content: '[=11=]2B';
    float: right;
    }
.collapsible2 .active:after {content: "12";}
.ccontent {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);
    padding-left: .8vmin;
    }
.btn {
    display: block;
    position: relative;
    padding-left: 3.5vmin;
    margin-bottom: 1.2vmin;
    cursor: pointer;
    font-size: 1.8vmin;
    }
.btn input {display: none;}
.checkmark {
    position: absolute;
    left: 0;
    height: 2vmin;
    width: 2vmin;
    background-color: #eee;
    border-radius: 50%;
    box-shadow: inset 0 0 4px 0px #b5a99b;
    }
.btn:hover input ~ .checkmark {background-color: #dcdcdc;}
.btn.activee input:checked ~ .checkmark {background-color: #cccccc;}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    }
.btn input:checked ~ .checkmark:after {display: block;}
.btn .checkmark:after {
    top: 0.68vmin;
    left: 0.68vmin;
    width: 0.64vmin;
    height: 0.64vmin;
    border-radius: 50%;
    background: #98948e;
    }

    <div class="ad">Lorem ipsum dolor sit amet, consec</div>

    <ul class="navbar" id="myTopnav">
        <li class="links"><a href="index.html">adipiscing</a></li>
        <li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>
            <div class="dropdown-content">
                <a href="javascript:void(0)">Loren</a>
                <a href="javascript:void(0)">ipsum</a></div>
        </li>
        <li class="rechts"><a href="over-mij.html">sed</a></li>
        <li class="rechts"><a href="webshop.html" class="active">do</a></li>
        <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>

    <div class="webshoptekst">
        <h1>do</h1>
        <p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="sidenav">
            <button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>
            <div class="dropdown-container" id="myBtnContainer">


                <button type="button" class="collapsible2">Sorteren op</button>
                <div class="ccontent">
                    <label class="btn activee" onclick="filterSelection('all')">Toon alles<input type="radio"
                            name="radio"><span class="checkmark"></span></label>
                    <label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span
                            class="checkmark"></span></label>
                    <label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span
                            class="checkmark"></span></label>
                    <label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span
                            class="checkmark"></span></label>
                </div>

                <button type="button" class="collapsible2">Talen</button>
                <div class="ccontent">
                    <label class="btn" onclick="filterSelection('Nederlands')">Dutch<input type="radio"
                            name="radio"><span class="checkmark"></span></label>
                    <label class="btn" onclick="filterSelection('Engels')">Engels<input type="radio" name="radio"><span
                            class="checkmark"></span></label>
                </div>

            </div>
        </div>


        <div class="row" id="id01">

            <div class="column English">
                <div class="kaartje">
                    <div><img src="webshopOT.jpg" alt="Oliver Twist"></div>
                    <h4>Oliver Twist</h4>
                    <h6>Charles Dickens</h6>
                    <p class="price">€9,99</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column English">
                <div class="kaartje">
                    <div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>
                    <h4>The Complete Short Stories</h4>
                    <h6>Edgar Allan Poe</h6>
                    <p class="price">€7,98</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column Nederlands">
                <div class="kaartje">
                    <div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>
                    <h4>Romeo en Julia</h4>
                    <h6>William Shakespeare</h6>
                    <p class="price">€14,55</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column Nederlands">
                <div class="kaartje">
                    <div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>
                    <h4>Harry Potter en de Steen der Wijzen</h4>
                    <h6>J. K. Rowling</h6>
                    <p class="price">€16,58</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column Nederlands">
                <div class="kaartje">
                    <div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>
                    <h4>Harry Potter en de Geheime Kamer</h4>
                    <h6>J. K. Rowling</h6>
                    <p class="price">€17,19</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column Nederlands">
                <div class="kaartje">
                    <div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>
                    <h4>Harry Potter en de Gevangene van Azkaban</h4>
                    <h6>J. K. Rowling</h6>
                    <p class="price">€17,97</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column Nederlands">
                <div class="kaartje">
                    <div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>
                    <h4>Harry Potter en de Vuurbeker</h4>
                    <h6>J. K. Rowling</h6>
                    <p class="price">€18,43</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column English">
                <div class="kaartje">
                    <div><img src="webshopABP.jpg" alt="All the Bright Places"></div>
                    <h4>All the Bright Places</h4>
                    <h6>Jennifer Niven</h6>
                    <p class="price">€13,29</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

            <div class="column English">
                <div class="kaartje">
                    <div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>
                    <h4>The Fault in our Stars</h4>
                    <h6>John Green</h6>
                    <p class="price">€11,55</p>
                    <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>
                </div>
            </div>

        </div>
    </div>

    <div style="clear: both;"></div>

由于下面的内容，粘性导航栏停止工作

Sticky navigation bar stops working due to content underneath

html

javascript

css

sticky