javascript - 导致宽度问题的视差滚动和固定页脚代码-6ren

javascript - 导致宽度问题的视差滚动和固定页脚代码

转载作者：太空宇宙更新时间：2023-11-04 02:07:18

我拼凑了一些代码。一个是视差滚动，另一个是我在这里找到的一段固定页脚代码:http://codepen.io/madshaakansson/pen/CGjcH

尽管将它们连接在一起并解决了一些问题后，我现在遇到了不同宽度的问题。页眉与页脚的宽度不同，主要内容不会跨越页面的整个宽度。我尝试将内容 css 的宽度调整为 100%，这使得主要内容跨越了整个宽度，但最终破坏了页脚。

我不确定我需要更改什么才能使这些不同的代码位协同工作。任何建议将不胜感激。

我的尝试: http://codepen.io/Dingerzat/pen/QGbWKK

HTML

     /*global define: false */
    function init() {
      window.addEventListener('scroll', function(e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
          shrinkOn = 300,
          header = document.querySelector("header");
        if (distanceY > shrinkOn) {
          classie.add(header, "smaller");
        } else {
          if (classie.has(header, "smaller")) {
            classie.remove(header, "smaller");
          }
        }
      });
    }
    window.onload = init();



    (function(window) {

      'use strict';

      // class helper functions from bonzo https://github.com/ded/bonzo

      function classReg(className) {
        return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
      }

      // classList support for class management
      // altho to be fair, the api sucks because it won't accept multiple classes at once
      var hasClass, addClass, removeClass;

      if ('classList' in document.documentElement) {
        hasClass = function(elem, c) {
          return elem.classList.contains(c);
        };
        addClass = function(elem, c) {
          elem.classList.add(c);
        };
        removeClass = function(elem, c) {
          elem.classList.remove(c);
        };
      } else {
        hasClass = function(elem, c) {
          return classReg(c).test(elem.className);
        };
        addClass = function(elem, c) {
          if (!hasClass(elem, c)) {
            elem.className = elem.className + ' ' + c;
          }
        };
        removeClass = function(elem, c) {
          elem.className = elem.className.replace(classReg(c), ' ');
        };
      }

      function toggleClass(elem, c) {
        var fn = hasClass(elem, c) ? removeClass : addClass;
        fn(elem, c);
      }

      var classie = {
        // full names
        hasClass: hasClass,
        addClass: addClass,
        removeClass: removeClass,
        toggleClass: toggleClass,
        // short names
        has: hasClass,
        add: addClass,
        remove: removeClass,
        toggle: toggleClass
      };

      // transport
      if (typeof define === 'function' && define.amd) {
        // AMD
        define(classie);
      } else {
        // browser global
        window.classie = classie;
      }

    })(window);

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
blockquote {
  quotes: none;
}
blockquote:before,
blockquote:after {
  content: '';
  content: none;
}
del {
  text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */

table {
  border-collapse: collapse;
  border-spacing: 0;
}
a img {
  border: none;
}
/* =Scss Variables
    -------------------------------------------------------------- */

/* =Global
    -------------------------------------------------------------- */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: #3cb5f9;
  color: #505050;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
}
/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  font-weight: 300;
}
a {
  text-decoration: none;
  color: #3cb5f9;
}
a:hover {
  color: #0793e2;
}
/* =Template
    -------------------------------------------------------------- */

#wrapper {
  width: 100%;
  margin: 0 auto;
}
#main {
  background-color: #ffffff;
  padding-top: 150px;
}
.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 30px;
}
section {
  padding: 60px 0;
}
section h1 {
  font-weight: 700;
  margin-bottom: 10px;
}
section p {
  margin-bottom: 30px;
}
section p:last-child {
  margin-bottom: 0;
}
section.color {
  background-color: #d51c84;
  color: white;
}
/* =Info Bar
    -------------------------------------------------------------- */

#info-bar {
  background-color: #000000;
}
#info-bar a {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
#info-bar a:hover {
  background-color: #0793e2;
}
#info-bar span.all-tutorials,
#info-bar span.back-to-tutorial {
  display: block;
  width: 50%;
}
#info-bar span.all-tutorials {
  float: left;
  text-align: left;
}
#info-bar span.back-to-tutorial {
  float: right;
  text-align: right;
}
/* =Header
    -------------------------------------------------------------- */

#logo img {
  height: 40%;
}
header {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #000000;
  -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 {
  display: inline-block;
  height: 150px;
  line-height: 150px;
  float: left;
  font-family: "Oswald", sans-serif;
  font-size: 60px;
  color: white;
  font-weight: 400;
  -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 {
  display: inline-block;
  float: right;
}
header nav a {
  line-height: 150px;
  margin-left: 20px;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  -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 a:hover {
  color: white;
}
header.smaller {
  height: 75px;
}
header.smaller h1#logo {
  width: 150px;
  height: 75px;
  line-height: 75px;
  font-size: 30px;
}
header.smaller nav a {
  line-height: 75px;
}
/* =Footer
    -------------------------------------------------------------- */

*,
*:before,
*:after {
  box-sizing: border-box;
  color: #242424;
  padding: 20;
  margin: 30;
}
html,
body {
  background: rgb(0, 0, 0);
}
.content {
  width: 850px;
  margin: auto;
  margin-bottom: 350px;
  /* Same height as footer */
  padding: 100px 0;
}
.fixed_footer {
  width: 100%;
  height: 350px;
  background: #000000;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -100;
}
.fixed_footer p {
  color: #696969;
  column-count: 2;
  column-gap: 50px;
  font-size: 1em;
  font-weight: 300;
}
/* =Extras
    -------------------------------------------------------------- */

.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
/* =Media Queries
    -------------------------------------------------------------- */

@media all and (max-width: 660px) {
  /* =Header
      -------------------------------------------------------------- */
  header h1#logo {
    display: block;
    float: none;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  header nav {
    display: block;
    float: none;
    height: 50px;
    text-align: center;
    margin: 0 auto;
  }
  header nav a {
    line-height: 50px;
    margin: 0 10px;
  }
  header.smaller {
    height: 75px;
  }
  header.smaller h1#logo {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
  }
  header.smaller nav {
    height: 35px;
  }
  header.smaller nav a {
    line-height: 35px;
  }
}
@media all and (max-width: 600px) {
  .container {
    width: 100%;
  }
  #info-bar a {
    display: block;
  }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    width: 100%;
  }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    float: none;
    text-align: center;
  }
  #info-bar span.all-tutorials {
    border-bottom: solid 1px #0793e2;
  }
}
html,
body {
  margin: 0;
  height: 100%;
}
section {
  position: relative;
  height: 100%;
  background-attachment: fixed;
  background-size: cover !important;
  background-position: center;
  background-blend-mode: screen;
  /* &:nth-of-type(1) */
}
section h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #fff;
  width: 100%;
  text-align: center;
}
section:nth-of-type(1) {
  /* .paralax-1 */
}
section:nth-of-type(1) .paralax-1 {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* .new-paralax */
}
section:nth-of-type(1) .paralax-1 .new-paralax {
  z-index: -100000;
  transform: translateZ(-8000px) scale(0.4);
  background-attachment: fixed;
  background-size: cover !important;
  background-position: center;
  background-blend-mode: screen;
  height: 100%;
  width: 100%;
  position: relative;
  transform: scale(1.3);
  background-color: #ffffff;
  background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg");
}
section:nth-of-type(2) {
  background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/iStock_000068237701_Full-edited.jpg");
}
section:nth-of-type(3) {
  background-image: url("https://visualhunt.com/photos/xl/2/soup-vegetables-pot-cooking-food-healthy-carrot.jpg");
  background-color: red;
}
section:nth-of-type(4) {
  background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg");
}

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />

<!-- js -->


<body>

  <div id="wrapper">

    <header>
      <div class="container clearfix">
        <h1 id="logo">
                <img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/bilendi-logo-trans.png">
            </h1>
        <nav>
          <a href="">Lorem</a>
          <a href="">Ipsum</a>
          <a href="">Dolor</a>
        </nav>
      </div>
    </header>
    <!-- /header -->
    <div id="main">
      <div id="content">
        <main class="content" role="main">

          <section>
            <div class="container">
              <h2>Services for Market Research</h2>
              <br>
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
              <p>
                <a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">&laquo; Go back to this tutorial?</a>
                <br>
                <a href="http://www.callmenick.com/tutorials">&laquo; Go back to all tutorials?</a>
              </p>
            </div>
          </section>
          <section class="color">
            <div class="container">
              <h1>Cupcakes for the people!</h1>
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
            </div>
          </section>
          <section>
            <div class="container">
              <h1>Chocolate, vanilla, and red velvet</h1>
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
            </div>
          </section>
          <section class="color">
            <div class="container">
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
            </div>
          </section>
          <section>
            <div class="container">
              <h1>Sugar rush, oh my...</h1>
              <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet
                roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan
                pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
              <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies
                chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies
                ice cream macaroon applicake.</p>
            </div>
          </section>
        </main>
      </div>
    </div>
    <!-- #main -->


    <footer class="fixed_footer">
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi.
          Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
      </div>
    </footer>



  </div>
  <!-- /#wrapper -->


</body>

函数初始化(){ window.addEventListener('滚动', function(e) { var distanceY = window.pageYOffset ||文档.documentElement.scrollTop, 收缩 = 300, header = document.querySelector("header"); 如果(distanceY > shrinkOn){ classie.add(header, "更小"); } 别的 { 如果(classie.has(标题，“更小”)){ classie.remove(header, "更小"); } } });}window.onload = init();

最佳答案

<footer class="fixed_footer">
  <div class="container content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus nemo quo totam neque quis soluta nisi obcaecati aliquam saepe dicta adipisci blanditiis quaerat earum laboriosam accusamus nesciunt! Saepe ex maxime enim asperiores nisi. Obcaecati nostrum nobis laudantium aliquam commodi veniam magni similique ullam quis pariatur voluptatem harum id error.</p>
  </div>
</footer>

将容器类添加到页脚内容并给内容 padding 如下所示