Question

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

虽然将它们固定在一起并解决了一些问题之后，我现在遇到了不同宽度的问题。标题与页脚的宽度不同，主要内容不会跨越页面的整个宽度。我已经尝试将内容css的宽度调整为100％，这使得主要内容跨越整个宽度，但它最终打破了页脚。

我不确定我需要改变什么来使这些不同的代码一起工作。任何建议将不胜感激。

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

HTML

＆＃13;

     /*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);

＆＃13;

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

＆＃13;

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

＆＃13;

function init（）{ window.addEventListener（＆＃39; scroll＆＃39;，function（e）{ var distanceY = window.pageYOffset || document.documentElement.scrollTop， shrinkOn = 300， header = document.querySelector（＆＃34; header＆＃34;）; if（distanceY＆gt; shrinkOn）{ classie.add（标题，＆＃34;较小＆＃34;）; } else { if（classie.has（header，＆＃34; less＆＃34;））{ classie.remove（标题，＆＃34;较小＆＃34;）; } } }）; } window.onload = init（）;

Answer 1

<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，如下所示

.content{padding:100px 30px;}

Answer 2

将页脚类从内容更改为contenttwo并将此代码添加到下面。它将解决您的页脚问题

.contenttwo {
width: 850px;
margin: auto;
margin-bottom: 350px;
padding: 100px 0;

}

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

2 个答案: