登录
当前位置： 首页 > 知识库问答 >
问题：

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

隗驰
2023-03-14

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

虽然在拼接并修复了几个问题后，我现在有一个不同宽度的问题。页眉与页脚的宽度不同，主内容不跨越页面的整个宽度。我已经尝试过将内容css的宽度调整到100%，这使得主要内容跨越了整个宽度，但最后却以打碎页脚而告终。

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

我的尝试：http://codepen.io/dingerzat/pen/qgbwkk

HTML

null

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

null

函数init（）{window.addeVentListener（“scroll”,函数(e){var distanceY=window.pageyoffset document.documentelement.scrolltop,shrinkOn=300,header=document.queryselector（“header”）；}else{if（distanceY>shrinkOn）{classe.add（header,“small”））{classe.remove（header,“small”）；}window.onload=init（）；

共有2个答案

金阳曜
2023-03-14

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

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

}

岳风畔
2023-03-14 
<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>

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

.content{padding:100px 30px;}
 类似资料：
  • 固定页眉和页脚，内容可滚动

    我将页眉和页脚设置为Position：Fixed。但如果是可滚动的内容，则文本将转到页眉/页脚区域：下面是我的完整代码:http://jsfidle.net/kaqz1km2/6/ 在这种情况下，我不想使用background-image或background-color。 下面是CSS： null null

  • CSS单列布局以固定宽度为中心的宽度固定为100％，带页眉和页脚

    问题内容： 我最近一直在研究CSS布局，该布局将显示固定宽度（最小宽度，最好可扩展）的单个居中列，占据整个高度（减去页眉和页脚）。 有什么建议吗？我已经尝试过这里发布的几种方法，但是没有一种符合我的标准。另外，我不想为此使用JS，因此它必须是纯CSS。 我不是专家，所以我不知道采用哪种方法： 三列，每列的边距减去中心列宽度的一半再加上一个假的中心列，以拉伸到100％的高度？我有点不喜欢这个想法，因

  • 固定页眉、固定页脚、全高多个可滚动列布局

    我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它，但绝望正在逼近。我需要： 固定高度、100%宽度、静态标题 固定高度、100%宽度、静态页脚 固定宽度的内容区域，居中和全部剩余高度 内容区域需要： 两列，均为全高 上面的内容相当简单，但可能需要更改以适应下一部分。 每一列都需要： 静态标头 静态页脚 页眉和页脚之间的可滚动内容区域 我花了一天的时间尝试各种方法（甚至是基于--喘息--

  • 可滚动布局中的一个固定页脚

    我想实现一个表单与一个图像页脚，放置在视图的底部，和一个可滚动的容器，沿Y坐标。 我尝试使用边框布局：在南方位置，我把图像的页脚；在北边的位置，我放了一个可滚动的boxlayout。

  • 表固定页眉和可滚动主体

    问题内容： 我正在尝试使用bootstrap 3表制作具有固定标题和可滚动内容的表。不幸的是，我发现的解决方案不适用于引导程序或使样式混乱。 这里有一个简单的引导表，但是由于某种原因我不知道tbody的高度不是10px。 例： 问题答案： 这是有效的解决方案：

  • 视差滚动视图

    利用UIScrollView实现视差滚动效果。在demo中，滑动ScrollView，背景图和文字的滚动速度不一样。直接用ScrollView 的协议，对其子视图的坐标进行随机系数比例的位置移动修正，从而实现视差滚动效果。没有用其他的框架，代码简单。 作者说：原创Demo 转载请注明出处。 [Code4App.com]

相关问答

固定页脚，具有100高度绝对位置正文和jquery滚动菜单固定宽度的JScrollPane使用视页和选项卡滚动问题使RecolyerView具有固定高度和可滚动性带有固定页眉和页脚以及可滚动内容的模式对话框

相关文章

将固定宽度的文本导入SQLCSS单列布局，以页眉和页脚为中心的固定宽度为100％高CSS滚动条宽度固定页脚的CSS跨度中的CSS固定宽度

相关阅读

ionic 滚动条CSS滚动条JavaFX滚动条百度9.13AK代码，百度2023秋招研发A卷2.4.1 ScrollView(滚动条)

相关工具

视差滚动视图循环滚动视图ScrollView滑动固定效果滚动菜单首列固定的列表

相关文档

uCore OS 实验指导书和源码网址基于深度学习的推荐系统：综述和新视角libevent 源码深度剖析代码整洁的 JavaScript追求代码质量
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.