Question

如果您使浏览器窗口更小，刷新页面并最大化窗口，导航栏将位于同一位置而不是粘在底部（当您刷新页面时它会返回到底部）。如何解决这个问题？

另外，如何在#menu（或.navigation）内垂直居中？

＆＃13;

$(document).ready(function() {
   var menu = $('#menu');
   var windowH = $(window).height();
   var stickToBot = windowH - menu.outerHeight(true);
   menu.css('top', stickToBot + 'px');
        
   $(window).scroll(function() {
     var scrollVal = $(this).scrollTop();
     if (scrollVal > stickToBot) {
       menu.css({top: '0px', position: 'fixed'});
     }
     else {
       menu.css({top: stickToBot + 'px', position: 'absolute'});
     }
  });
 });

＆＃13;

html,body {
  min-width:320px;
  min-height:320px;
  margin:0;
  font-family: 'Lato', sans-serif;
  text-align:center;
}

h1 {
  margin-top:0;
  font-size:68px;
  font-weight:bold;
}
#menu {
    z-index:99;
    width: 100%;
    min-height:80px;
    height: 10%;
    background:white;
    color: #ffffff;
    position: absolute;

}
.header-wrapper {
  background-image: url("images/backgrounds/typography.jpg");
  background-size:cover;
  background-position:center;
  min-height:calc(90vh - 6em);
  text-align:center;
  padding-top:6em;
  margin:0 auto;
  position:relative;
}
.tester{
  position:absolute;
  width:100%;
  display:flex;
  bottom:50px;
  margin: auto;
  align-items: center;
  justify-content: center;
}
.tester a{
  margin-left:1em;
  margin-right:1em;
  opacity: 0.75;
}
.tester a:hover{
  opacity:1;
}
.slider-buttons {
  position:absolute;
  max-width:1170px;
}
.typography {
  bottom: 100px;
  left:auto;
}
.navigation {
  max-width:1170px;
  margin:0 auto;
  overflow:hidden;
}

nav {
  float:right;
  text-transform:uppercase;
}
nav a {
  text-decoration:none;
  color:#626262;
  padding:40px 20px 40px 20px;
  margin:0;
}
nav #home:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover {
  color:white;
}
nav #home:hover {
  background-color:#dfbb42;
}
nav #menu2:hover {
  background-color:#c43434;
}
nav #menu3:hover {
  background-color:#508b61;
}
nav #menu4:hover {
  background-color:#428d9e;
}
nav #menu5:hover {
  background-color:#575fbd;
}


#logo {
  float:left;
  margin-left:30px;
}

.text-boxes-wrapper{
  padding: 2em 0 2em 0;
  background-color:#f1f1f1;
}
.text-boxes {
  position:relative;
  max-width:1170px;
  margin:0 auto;
  height:450px;
  padding:3em;
}
.text-box-content{
  max-width:500px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  text-align:left;
  padding:1em;
  background-color:white;
}

#box1, #box2, #box3, #box4 {
  position:absolute;
  padding:2em;
  color:white;
  text-decoration:none;
  font-size:2em;
}

#box1 {
  background-color:#428d9e;
  top:0;
  left:0;
}
#box2 {
  background-color:#c43434;
  top:0;
  right:0;
}
#box3 {
  background-color:#dfbb42;
  bottom:0;
  left:0;
}
#box4 {
  background-color:#508b61;
  bottom:0;
  right:0;
}

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>random title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="menusticker.js"></script>
</head>

<body>

<section>
  <div class="header-wrapper">
    <h1>random heading</h1>
    <div class="tester">
      <a href="">          
        <div class="typography">
          <img src="images/slider-buttons/typography/typography-icon.jpg">
          <img src="images/slider-buttons/typography/typography-text.jpg">
        </div>
      </a>
      <a href="">
        <div class="typography">
          <img src="images/slider-buttons/rwd/rwd-icon.jpg">
          <img src="images/slider-buttons/rwd/rwd-text.jpg">
        </div>
      </a>
      </a>
      <a href="">
        <div class="typography">
          <img src="images/slider-buttons/ux/ux-icon.jpg">
          <img src="images/slider-buttons/ux/ux-text.jpg">
        </div>
      </a>
      </a>
    </div>
  </div>
</section>



<section id="menu">
  <div class="navigation">
    <nav>
    <a href="" target="_top" id="home">Home</a>
    <a href="#text-boxes" id="menu2">Menu 2</a>
    <a href="#picture-boxes-section" id="menu3">Menu 3</a>
    <a href="" id="menu4">Menu 4</a>
    <a href="" id="menu5">Menu 5</a>
  </nav>
  <img src="css/images/logo.png" alt="Logo" id="logo">
</div>
</section>


<section id="text-boxes">
  <div class="text-boxes-wrapper">
    <div class="text-boxes">
      <a href="" id="box1">BOX NAME 1</a>
      <a href="" id="box2">BOX NAME 2</a>
      <a href="" id="box3">BOX NAME 3</a>
      <a href="" id="box4">BOX NAME 4</a>
      <div id="text-box-content">
        <h2>Text from box name 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare turpis nec mauris scelerisque, sed suscipit elit dapibus. Aliquam ut eros sed risus convallis venenatis eget vitae mi. Cras dictum est non nunc semper blandit. Quisque convallis tristique dolor eget ultrices. Mauris ac orci quis neque facilisis laoreet. Suspendisse vitae ultrices ipsum, at placerat eros. Proin varius malesuada ultricies. Cras a metus elementum, pellentesque libero eu, faucibus lorem. Integer ac ornare lacus. Ut pretium felis tellus, nec faucibus eros rhoncus eget. Pellentesque ultrices, ligula vestibulum porttitor pharetra, arcu nisl vulputate ligula, id vulputate ligula urna vel tortor. In ullamcorper blandit erat, nec egestas massa commodo consectetur. In nec odio lorem. Donec nulla neque, vehicula in bibendum et, rhoncus sit amet nibh.</p>
      </div>
    </div>
  </div>
</section>

＆＃13;

窗口调整大小/定位后jQuery不更新

0 个答案: