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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

thi*_*ery 3

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

\n\n

\r\n

function sortBooks(upDown) {\r\n\r\n  var columns = document.getElementsByClassName("column")\r\n\r\n  function pricesToArray(columns) {\r\n    var prices = [];\r\n    for (var index = 0; index < columns.length; index++) {\r\n      var price = columns[index].querySelector(\'.price\').innerText;\r\n      var priceInt = price.substr(1, price.length).replace(\',\', \'.\');\r\n      prices[index] = parseFloat(priceInt, 10);\r\n    }\r\n    return prices;\r\n  }\r\n\r\n  var prices = pricesToArray(columns);\r\n\r\n  function selectionSort(arr, upDown) {\r\n    var minIdx, temp,\r\n      len = arr.length;\r\n    for (var i = 0; i < len; i++) {\r\n      minIdx = i;\r\n      for (var j = i + 1; j < len; j++) {\r\n        if (upDown) {\r\n          if (arr[j] < arr[minIdx]) {\r\n            minIdx = j;\r\n          }\r\n        } else {\r\n          if (arr[j] > arr[minIdx]) {\r\n            minIdx = j;\r\n          }\r\n        }\r\n      }\r\n      temp = arr[i];\r\n      arr[i] = arr[minIdx];\r\n      //replace columns\r\n      replaceColumns(i, minIdx);\r\n      arr[minIdx] = temp;\r\n    }\r\n    return arr;\r\n  }\r\n\r\n  function replaceColumns(i, minIdx) {\r\n    var temporaryColumn = columns[i].innerHTML;\r\n    columns[i].innerHTML = columns[minIdx].innerHTML;\r\n    columns[minIdx].innerHTML = temporaryColumn;\r\n  }\r\n\r\n  var pricesSorted = selectionSort(prices, upDown);\r\n\r\n}\r\n\r\nfunction sortList() {\r\n  var list, i, switching, b, shouldSwitch;\r\n  list = document.getElementById("id01");\r\n  switching = true;\r\n  /* Make a loop that will continue until\r\n  no switching has been done: */\r\n  while (switching) {\r\n    // start by saying: no switching is done:\r\n    switching = false;\r\n    b = list.getElementsByTagName("h4");\r\n    // Loop through all list-items:\r\n    for (i = 0; i < (b.length - 1); i++) {\r\n      // start by saying there should be no switching:\r\n      shouldSwitch = false;\r\n      /* check if the next item should\r\n      switch place with the current item: */\r\n      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {\r\n        /* if next item is alphabetically\r\n        lower than current item, mark as a switch\r\n        and break the loop: */\r\n        shouldSwitch = true;\r\n        break;\r\n      }\r\n    }\r\n    if (shouldSwitch) {\r\n      /* If a switch has been marked, make the switch\r\n      and mark the switch as done: */\r\n      b[i].parentNode.parentNode.parentNode.insertBefore(b[i + 1].parentNode.parentNode, b[i].parentNode.parentNode);\r\n      switching = true;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n/* 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 */\r\nvar dropdown = document.getElementsByClassName("dropdown-btn");\r\nvar i;\r\n\r\nfor (i = 0; i < dropdown.length; i++) {\r\n  dropdown[i].addEventListener("click", function() {\r\n    this.classList.toggle("active");\r\n    var dropdownContent = this.nextElementSibling;\r\n    if (dropdownContent.style.display === "block") {\r\n      dropdownContent.style.display = "none";\r\n    } else {\r\n      dropdownContent.style.display = "block";\r\n    }\r\n  });\r\n}\r\n\r\nvar coll = document.getElementsByClassName("collapsible2");\r\nvar i;\r\n\r\nfor (i = 0; i < coll.length; i++) {\r\n  coll[i].addEventListener("click", function() {\r\n    this.classList.toggle("active");\r\n    var content = this.nextElementSibling;\r\n    if (content.style.maxHeight) {\r\n      content.style.maxHeight = null;\r\n    } else {\r\n      content.style.maxHeight = content.scrollHeight + "px";\r\n    }\r\n  });\r\n}\r\n\r\nfilterSelection("all")\r\n\r\nfunction filterSelection(c) {\r\n  var x, i;\r\n  x = document.getElementsByClassName("column");\r\n  if (c == "all") c = "";\r\n  for (i = 0; i < x.length; i++) {\r\n    w3RemoveClass(x[i], "show");\r\n    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");\r\n  }\r\n}\r\n\r\nfunction w3AddClass(element, name) {\r\n  var i, arr1, arr2;\r\n  arr1 = element.className.split(" ");\r\n  arr2 = name.split(" ");\r\n  for (i = 0; i < arr2.length; i++) {\r\n    if (arr1.indexOf(arr2[i]) == -1) {\r\n      element.className += " " + arr2[i];\r\n    }\r\n  }\r\n}\r\n\r\nfunction w3RemoveClass(element, name) {\r\n  var i, arr1, arr2;\r\n  arr1 = element.className.split(" ");\r\n  arr2 = name.split(" ");\r\n  for (i = 0; i < arr2.length; i++) {\r\n    while (arr1.indexOf(arr2[i]) > -1) {\r\n      arr1.splice(arr1.indexOf(arr2[i]), 1);\r\n    }\r\n  }\r\n  element.className = arr1.join(" ");\r\n}\r\n\r\n\r\n// Add active class to the current button (highlight it)\r\nvar btnContainer = document.getElementById("myBtnContainer");\r\nvar btns = btnContainer.getElementsByClassName("btn");\r\nfor (var i = 0; i < btns.length; i++) {\r\n  btns[i].addEventListener("click", function() {\r\n    var current = document.getElementsByClassName("activee");\r\n    current[0].className = current[0].className.replace(" activee", "");\r\n    this.className += " activee";\r\n  });\r\n}\r\n\r\n\r\nfunction myFunction() {\r\n  var x = document.getElementById("myTopnav");\r\n  if (x.className === "navbar") {\r\n    x.className += " responsive";\r\n  } else {\r\n    x.className = "navbar";\r\n  }\r\n}

Run Code Online (Sandbox Code Playgroud)\r\n

body {\r\n  margin: 0;\r\n  background-color: #fcf3e3;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.navbar {\r\n  list-style-type: none;\r\n  background-color: #f9eedd;\r\n  box-shadow: 0px 5px 5px -6px #c4b29c;\r\n  font-family: Georgia, "Times New Roman", Serif;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0 20%;\r\n  z-index: 10;\r\n  position: sticky;\r\n  top: 0;\r\n  height: 7vmin;\r\n}\r\n\r\n.navbar li a {\r\n  display: block;\r\n  color: #8e8275;\r\n  text-decoration: none;\r\n  transition: 0.3s;\r\n  letter-spacing: .1vmin;\r\n  font-size: 1.6vmin;\r\n  padding: 1.5vmin 1vmin 1.2vmin 1vmin;\r\n  margin: 1.3vmin;\r\n}\r\n\r\n.navbar li.links {\r\n  float: left;\r\n}\r\n\r\n.navbar li.rechts {\r\n  float: right;\r\n}\r\n\r\n.navbar li a:hover {\r\n  color: #252118;\r\n}\r\n\r\n.navbar li a.active,\r\n.navbar .dropdown-content a.active {\r\n  text-decoration: underline\r\n}\r\n\r\n.navbar .dropdown-content a.active {\r\n  background-color: #f3e9da;\r\n}\r\n\r\n.navbar .dropdown-content {\r\n  display: none;\r\n  position: absolute;\r\n  background-color: #fef6e9;\r\n  min-width: 13vmin;\r\n  box-shadow: 0px 2px 5px .1px rgba(0, 0, 0, 0.2);\r\n  z-index: 10;\r\n  top: 7vmin;\r\n  margin: 0 2vmin;\r\n}\r\n\r\n.navbar .dropdown-content a {\r\n  text-align: left;\r\n  margin: 0;\r\n  padding: 1.5vmin 1.3vmin;\r\n}\r\n\r\n.navbar .dropdown-content a:hover {\r\n  background-color: #f7eedc;\r\n}\r\n\r\n.navbar .dropdown:hover .dropdown-content {\r\n  display: block;\r\n}\r\n\r\n.navbar li.icon {\r\n  display: none;\r\n}\r\n\r\n.ad {\r\n  background-color: #fbf4e9;\r\n  text-align: center;\r\n  font-size: 1.5vmin;\r\n  padding: .5vmin;\r\n}\r\n\r\n.webshoptekst {\r\n  letter-spacing: .06vmin;\r\n  font-family: Arial, Verdana, Sans-serif;\r\n  margin: 5vmin 10% 0 10%;\r\n}\r\n\r\n.row {\r\n  margin-left: 27vmin;\r\n  overflow: auto;\r\n}\r\n\r\n.column {\r\n  float: left;\r\n  display: none;\r\n  padding: 0 1.5vmin 1.5vmin 0;\r\n  width: 33.3%;\r\n}\r\n\r\n.kaartje {\r\n  background-color: #FFFF;\r\n  padding: 1.2vmin;\r\n  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);\r\n  text-align: center;\r\n  max-width: 20vmin;\r\n  height: 40vmin;\r\n  position: relative;\r\n}\r\n\r\n.kaartje div {\r\n  height: 18vmin;\r\n}\r\n\r\n.kaartje div>img {\r\n  height: 100%;\r\n}\r\n\r\nh4 {\r\n  margin: 0;\r\n  font-size: 1.9vmin;\r\n  min-height: 6vmin;\r\n}\r\n\r\nh6 {\r\n  margin: 0;\r\n  font-size: 1.4vmin;\r\n  font-weight: normal;\r\n}\r\n\r\n.price {\r\n  color: #777676;\r\n  margin-top: .8vmin;\r\n  font-size: 1.4vmin;\r\n}\r\n\r\n.winkelwagen {\r\n  bottom: 0;\r\n  position: absolute;\r\n  left: 0;\r\n  padding: 1.2vmin;\r\n  width: 100%;\r\n}\r\n\r\n.kaartje button {\r\n  border: none;\r\n  outline: none;\r\n  padding: 1vmin;\r\n  color: #FFFF;\r\n  background-color: #000;\r\n  cursor: pointer;\r\n  font-size: 1vmin;\r\n}\r\n\r\n.kaartje button:hover {\r\n  opacity: 0.7;\r\n}\r\n\r\n.show {\r\n  display: block;\r\n}\r\n\r\n.sidenav {\r\n  width: 25vmin;\r\n  float: left;\r\n  box-shadow: 0px 1px 3px 0px #c4b29c;\r\n}\r\n\r\n.dropdown-btn {\r\n  padding: .6vmin .8vmin .6vmin 1.6vmin;\r\n  font-size: 2.5vmin;\r\n  color: #655f5a;\r\n  border: none;\r\n  background-color: #f5e8d2;\r\n  cursor: pointer;\r\n  outline: none;\r\n  width: 100%;\r\n  text-align: left;\r\n}\r\n\r\n.dropdown-container {\r\n  display: none;\r\n  background-color: #efe6d8;\r\n  padding-left: .8vmin;\r\n}\r\n\r\n.collapsible2 {\r\n  outline: none;\r\n  border: none;\r\n  color: #655f5a;\r\n  background-color: #efe6d8;\r\n  cursor: pointer;\r\n  width: 24vmin;\r\n  font-size: 2.4vmin;\r\n  text-align: left;\r\n  padding: .6vmin .8vmin .6vmin 1.6vmin;\r\n}\r\n\r\n.dropdown-btn:hover,\r\n.collapsible2:hover {\r\n  opacity: 0.7;\r\n}\r\n\r\n.collapsible2:after {\r\n  content: \'\\002B\';\r\n  float: right;\r\n}\r\n\r\n.collapsible2 .active:after {\r\n  content: "\\2212";\r\n}\r\n\r\n.ccontent {\r\n  overflow: hidden;\r\n  max-height: 0;\r\n  transition: max-height 0.2s cubic-bezier(0, 0, 0.2, 1);\r\n  padding-left: .8vmin;\r\n}\r\n\r\n.btn {\r\n  display: block;\r\n  position: relative;\r\n  padding-left: 3.5vmin;\r\n  margin-bottom: 1.2vmin;\r\n  cursor: pointer;\r\n  font-size: 1.8vmin;\r\n}\r\n\r\n.btn input {\r\n  display: none;\r\n}\r\n\r\n.checkmark {\r\n  position: absolute;\r\n  left: 0;\r\n  height: 2vmin;\r\n  width: 2vmin;\r\n  background-color: #eee;\r\n  border-radius: 50%;\r\n  box-shadow: inset 0 0 4px 0px #b5a99b;\r\n}\r\n\r\n.btn:hover input~.checkmark {\r\n  background-color: #dcdcdc;\r\n}\r\n\r\n.btn.activee input:checked~.checkmark {\r\n  background-color: #cccccc;\r\n}\r\n\r\n.checkmark:after {\r\n  content: "";\r\n  position: absolute;\r\n  display: none;\r\n}\r\n\r\n.btn input:checked~.checkmark:after {\r\n  display: block;\r\n}\r\n\r\n.btn .checkmark:after {\r\n  top: 0.68vmin;\r\n  left: 0.68vmin;\r\n  width: 0.64vmin;\r\n  height: 0.64vmin;\r\n  border-radius: 50%;\r\n  background: #98948e;\r\n}

Run Code Online (Sandbox Code Playgroud)\r\n

<div class="ad">Lorem ipsum dolor sit amet, consec</div>\r\n\r\n<ul class="navbar" id="myTopnav">\r\n  <li class="links"><a href="index.html">adipiscing</a></li>\r\n  <li class="dropdown links"><a href="javascript:void(0)">elit <i class="fa fa-caret-down"></i></a>\r\n    <div class="dropdown-content">\r\n      <a href="javascript:void(0)">Loren</a>\r\n      <a href="javascript:void(0)">ipsum</a></div>\r\n  </li>\r\n  <li class="rechts"><a href="over-mij.html">sed</a></li>\r\n  <li class="rechts"><a href="webshop.html" class="active">do</a></li>\r\n  <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>\r\n</ul>\r\n\r\n<div class="webshoptekst">\r\n  <h1>do</h1>\r\n  <p>eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\r\n  <div class="sidenav">\r\n    <button class="dropdown-btn"><i class="fa fa-bars"></i> Filters</button>\r\n    <div class="dropdown-container" id="myBtnContainer">\r\n\r\n\r\n      <button type="button" class="collapsible2">Sorteren op</button>\r\n      <div class="ccontent">\r\n        <label class="btn activee" onclick="filterSelection(\'all\')">Toon alles<input type="radio" name="radio"><span class="checkmark"></span></label>\r\n        <label class="btn" onclick="sortList()">Alfabetisch<input type="radio" name="radio"><span class="checkmark"></span></label>\r\n        <label class="btn" onclick="sortBooks(true)">Prijs oplopend<input type="radio" name="radio"><span class="checkmark"></span></label>\r\n        <label class="btn" onclick="sortBooks(false)">Prijs aflopend<input type="radio" name="radio"><span class="checkmark"></span></label>\r\n      </div>\r\n\r\n      <button type="button" class="collapsible2">Talen</button>\r\n      <div class="ccontent">\r\n        <label class="btn" onclick="filterSelection(\'Nederlands\')">Dutch<input type="radio" name="radio"><span class="checkmark"></span></label>\r\n        <label class="btn" onclick="filterSelection(\'Engels\')">Engels<input type="radio" name="radio"><span class="checkmark"></span></label>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class="row" id="id01">\r\n\r\n    <div class="column English">\r\n      <div class="kaartje">\r\n        <div><img src="webshopOT.jpg" alt="Oliver Twist"></div>\r\n        <h4>Oliver Twist</h4>\r\n        <h6>Charles Dickens</h6>\r\n        <p class="price">\xe2\x82\xac9,99</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column English">\r\n      <div class="kaartje">\r\n        <div><img src="webshopEAP.jpg" alt="The Complete Short Stories"></div>\r\n        <h4>The Complete Short Stories</h4>\r\n        <h6>Edgar Allan Poe</h6>\r\n        <p class="price">\xe2\x82\xac7,98</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column Nederlands">\r\n      <div class="kaartje">\r\n        <div><img src="webshopRJ.jpg" alt="Romeo en Julia"></div>\r\n        <h4>Romeo en Julia</h4>\r\n        <h6>William Shakespeare</h6>\r\n        <p class="price">\xe2\x82\xac14,55</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column Nederlands">\r\n      <div class="kaartje">\r\n        <div><img src="webshopHP1.jpg" alt="Harry Potter en de Steen der Wijzen"></div>\r\n        <h4>Harry Potter en de Steen der Wijzen</h4>\r\n        <h6>J. K. Rowling</h6>\r\n        <p class="price">\xe2\x82\xac16,58</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column Nederlands">\r\n      <div class="kaartje">\r\n        <div><img src="webshopHP2.jpg" alt="Harry Potter en de Geheime Kamer"></div>\r\n        <h4>Harry Potter en de Geheime Kamer</h4>\r\n        <h6>J. K. Rowling</h6>\r\n        <p class="price">\xe2\x82\xac17,19</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column Nederlands">\r\n      <div class="kaartje">\r\n        <div><img src="webshopHP3.jpg" alt="Harry Potter en de Gevangene van Azkaban"></div>\r\n        <h4>Harry Potter en de Gevangene van Azkaban</h4>\r\n        <h6>J. K. Rowling</h6>\r\n        <p class="price">\xe2\x82\xac17,97</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column Nederlands">\r\n      <div class="kaartje">\r\n        <div><img src="webshopHP4.jpg" alt="Harry Potter en de Vuurbeker"></div>\r\n        <h4>Harry Potter en de Vuurbeker</h4>\r\n        <h6>J. K. Rowling</h6>\r\n        <p class="price">\xe2\x82\xac18,43</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column English">\r\n      <div class="kaartje">\r\n        <div><img src="webshopABP.jpg" alt="All the Bright Places"></div>\r\n        <h4>All the Bright Places</h4>\r\n        <h6>Jennifer Niven</h6>\r\n        <p class="price">\xe2\x82\xac13,29</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class="column English">\r\n      <div class="kaartje">\r\n        <div><img src="webshopTF.jpg" alt="The Fault in Our Stars"></div>\r\n        <h4>The Fault in our Stars</h4>\r\n        <h6>John Green</h6>\r\n        <p class="price">\xe2\x82\xac11,55</p>\r\n        <p class="winkelwagen"><button>Toevoegen aan winkelwagen</button></p>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n

归档时间：	5 年，11 月前
查看次数：	84 次
最近记录：	5 年，11 月前