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

Posted 2023-03-04

【中文标题】由于下面的内容，粘性导航栏停止工作[重复]

【英文标题】：Sticky navigation bar stops working due to content underneath [duplicate]

【发布时间】：2020-05-07 05:04:56

【问题描述】：

我有这个带有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: '\002B';
    float: right;
    
.collapsible2 .active:after content: "\2212";
.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" ></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" ></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" ></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" ></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" ></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" ></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" ></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" ></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" ></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>

【问题讨论】：

你想做什么？让你的导航变得有粘性？

我希望它继续位于页面顶部，例如 position: fixed

【参考方案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: '\002B';
  float: right;


.collapsible2 .active:after 
  content: "\2212";


.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" ></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" ></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" ></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" ></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" ></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" ></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" ></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" ></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" ></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>

【参考方案2】：

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

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: '\002B';
    float: right;
    
.collapsible2 .active:after content: "\2212";
.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" ></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" ></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" ></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" ></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" ></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" ></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" ></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" ></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" ></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>