Question

我的调整大小/缩放标题出现问题。我希望它在我滚动以包含左上方的徽标和右上角的菜单时进行缩放，而徽标和菜单保持在顶部的中心。

＆＃13;

		$(function() {
		  $(window).scroll(function() {
		    var scroll = $(window).scrollTop();

		    if (scroll >= 1) {
		      $(".stickyjs").addClass('sticky');
		    } else {
		      $(".stickyjs").removeClass("sticky");
		    }
		  });
		});

＆＃13;

body {
  font-family: "Museo Sans for Dell";
}
header {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #ffffff;
  border-bottom: solid #eeeeee 1px;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}
header h1#logo {
  width: 647px;
  height: 351px;
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
header nav#menu {
  width: 700px;
  height: 100px;
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
header.sticky {
  height: 75px;
}
header.sticky h1#logo {
  width: 150px;
  height: 75px;
  position: fixed;
  top: 8px;
  left: 10%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
header.sticky nav#menu {
  width: 700px;
  height: 75px;
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
footer {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: #ffffff;
  border-top: solid #eeeeee 1px;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}
footer div#itsbroke {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
footer div#isocompliance {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
footer.sticky {
  height: 50px;
}
footer.sticky div#itsbroke {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
footer.sticky div#isocompliance {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
header img,
footer img {
  max-width: 100%;
  height: auto;
}
header span,
footer span {
  visibility: hidden;
}
.upper,
.confirm,
.select,
.verify {
  padding-top: 100px;
}
.lower {
  padding-bottom: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a name="#TOP" class="TOP"></a>

<header class="stickyjs">

  <h1 id="logo">
			<a href="#TOP"><img src="http://i.imgur.com/tA93HGZ.png" /><span>Two Minute Drill</span></a>
		</h1>

  <nav id="menu">
    <a href="#CONFIRM">
      <img src="http://i.imgur.com/iVaqRXi.jpg" /><span>Confirm Parts Needed</span>
    </a>
    <a href="#SELECT">
      <img src="http://i.imgur.com/rMUChKc.jpg" /><span>Select Parts Identified</span>
    </a>
    <a href="#VERIFY">
      <img src="http://i.imgur.com/pkKndfS.jpg" /><span>Verify Parts Selected</span>
    </a>
  </nav>

</header>

<footer class="stickyjs">

  <div id="itsbroke">
  </div>

  <div id="isocompliance">
  </div>

</footer>

<div class="upper"></div>

<!-------------------------->
<!-- CONFIRM PARTS NEEDED -->
<!-------------------------->

<div>

  <a name="CONFIRM"></a>
  <h3 class="confirm" style="color: blue; text-decoration: underline; cursor: pointer;">Confirm Parts Needed</h3>

  <p></p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

  <h3 style="color: blue; text-decoration: underline; cursor: pointer;"></h3>

  <p>2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

  <h3 style="color: blue; text-decoration: underline; cursor: pointer;"></h3>

  <p>3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

</div>

<!----------------------------->
<!-- SELECT PARTS IDENTIFIED -->
<!----------------------------->

<div>

  <a name="SELECT"></a>
  <h3 class="select" style="color: blue; text-decoration: underline; cursor: pointer;">Select Parts Identified</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

  <h3 style="color: blue; text-decoration: underline; cursor: pointer;"></h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

  <h3 style="color: blue; text-decoration: underline; cursor: pointer;"></h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

</div>

<!---------------------------->
<!-- VERIFY PARTS SELECTEDE -->
<!---------------------------->

<div>

  <a name="VERIFY"></a>
  <h3 class="verify" style="color: blue; text-decoration: underline; cursor: pointer;">Verify Parts Selected</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

  <h3 style="color: blue; text-decoration: underline; cursor: pointer;"></h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>
  <hr>

  <h3 style="color: blue; text-decoration: underline; cursor: pointer;"></h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue nulla, fermentum sit amet euismod et, dapibus a justo. Phasellus eu lacus gravida, scelerisque nisi luctus, dignissim arcu. Vestibulum ultricies arcu vitae nisi faucibus cursus.
    Pellentesque eleifend neque nec sapien tincidunt hendrerit. Mauris lacus felis, ultrices eget nisi in, laoreet tincidunt arcu. Phasellus ac odio sed nisi lacinia vulputate. Sed eleifend et odio id venenatis. Cum sociis natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus. Fusce accumsan nisl tincidunt, facilisis purus vitae, pretium mi. Integer bibendum, est et condimentum elementum, lectus enim rhoncus eros, ac sodales elit felis at lacus. Aliquam erat volutpat. Fusce
    dignissim mattis eros vel venenatis. Donec vitae nisi est.</p>

  <p><a href="#TOP">Back to Top</a>
  </p>

</div>

<div class="lower"></div>

＆＃13;

为什么我的菜单在滚动时没有调整大小并正确缩放？

0 个答案: