堆栈内存溢出
  繁体   English   中英

将CSS面板更改为100％宽度会创建跳动的jQuery滚动

[英]Changing CSS panel to 100% width creates jumpy jQuery scroll

 原文  2015-11-14 18:12:15  1   1    javascript/ jquery/ html/ css/ scroll

问题描述

我正在尝试链接导航栏列表项，以将滚动条过渡到页面上的特定面板。 在调整CSS以使所有面板背景（ .maincontent ）页面宽度为100％之后，滚动效果不再起作用...

CSS： 

/****Landscape****/
/*global styles*/

.body {
  width: 100%;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}

a {
  appearance: none;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
  background: transparent;
  color: #000000;
  border: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.5s ease;
  list-style: none;
  text-decoration: none;
}

a:focus,
a:hover {
  color: #e6e8eb;
  cursor: pointer;
  transition: color 0.5s ease;
  width: inherit;
  right: 0;
  left: 0;
}

a:active {
  color: #484747;
}
/*----/----global styles*/
/*Maincontent*/

.maincontent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
/*----/----Maincontent*/
/*contact panel*/

.letmeknow:hover {
  color: #464c4c;
  cursor: pointer;
  transition: color 0.5s ease;
}

.letmeknow {
  appearance: none;
  width: 80%;
  height: 50px;
  font-size: 1.05em;
  background: transparent;
  color: #e6e8eb;
  border: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.5s ease;
  outline: none;
  border: none;
}
/*Contact submit Form*/

#container {
  width: 840px;
  margin: 25px auto;
}

.whysign {
  float: left;
  background-color: white;
  width: 480px;
  height: 347px;
  border-radius: 0 5px 5px 0;
  padding-top: 20px;
  padding-right: 20px;
}

.signup {
  float: left;
  width: 300px;
  padding: 30px 20px;
  background-color: white;
  text-align: center;
  border-radius: 5px 0 0 5px;
}

[type=text] {
  display: block;
  margin: 0 auto;
  width: 80%;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  height: 45px;
  line-height: 45px;
  margin-bottom: 10px;
  font-size: 1em;
  color: rgba(0, 0, 0, .4);
}

input[type="submit"] {
  appearance: none;
  width: 80%;
  height: 50px;
  font-size: 1.05em;
  background: transparent;
  color: #e6e8eb;
  border: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.5s ease;
  outline: none;
  border: none;
}

input[type="submit"]:hover {
  color: #464c4c;
  cursor: pointer;
  transition: color 0.5s ease;
}

[type='text']:focus {
  outline: none;
  border-color: #53CACE;
}

span:hover {
  color: #53CACE;
}
/*----/----contact form*/
/*Nav Bar*/

.header {
  background: #ffffff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

.nav {
  background: #ffffff;
  float: right;
  text-align: right;
}

.nav > li {
  display: inline-block;
  padding: 2px;
  padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/

.panel {
  width: 100%;
  background: #000000;
  color: #ffffff;
  height: 40em;
  padding: 3em;
}

.links {
  color: #ffffff;
}

.panel .inner {
  padding-top: 10%;
  color: #df
}

.panel.panel-blank {
  background: #ffffff;
  color: #000000;
}
/*----/----Panels*/
/*logo*/

.logo {
  float: left;
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 18px;
  cursor: pointer;
}
/*----/----logo*/
/****Portrait****/

@media (max-width: 850px) {
  /*global styles*/

  .body {
    width: 100%;
    margin: 0;
    list-style: none;
    text-decoration: none;
  }
  .header {
    background: #ffffff;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .nav {
    position: fixed;
    width: 100%;
    text-align: center;
    display: none;
    background-color: #ffffff;
    left: 0;
    top: 39px;
  }
  .nav > li {
    postition: absolute;
    display: block;
    left: 0;
    width: 100%;
    padding-top: 0.6em;
    padding-bottom: 1em;
  }
  .nav > li:hover {
    postition: absolute;
    display: block;
    left: 0;
    width: 100%;
    padding-top: 0.6em;
    padding-bottom: 1em;
    cursor: pointer;
  }
  /*----/----global styles*/
  /*logo*/

  .logo {
    float: left;
    display: block;
    width: 15px;
    height: 15px;
    padding: 18px;
    cursor: pointer;
  }
  /*----/----logo*/
  /*navigation icon*/

  #toggle-menu {
    float: right;
    display: block;
    width: 15px;
    height: 15px;
    padding: 20px;
  }
  #toggle-menu div {
    width: 15px;
    height: 15px;
    position: relative;
  }
  #toggle-menu span {
    display: block;
    width: 15px;
    height: 3px;
    background: black;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
  }
  #toggle-menu span.top {
    top: 0px;
  }
  #toggle-menu span.middle {
    top: 6px;
  }
  #toggle-menu span.bottom {
    top: 12px;
  }
  /*----/----navigation icon*/
  /*navigation icon animation*/

  #toggle-menu.menu-is-active span {
    -webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }
  #toggle-menu.menu-is-active span.top,
  #toggle-menu.menu-is-active span.middle {
    top: 6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #toggle-menu.menu-is-active span.middle {
    opacity: 0;
  }
  #toggle-menu.menu-is-active span.bottom {
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /*----/----navigation icon animation*/
}
/*----/----Portrait*/

jQuery的： 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

jQuery(document).ready(function () {
$(window).resize(function(){
     if ($(window).width() >=850) {
        $(".nav").show();
    }
    else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {

    $(this).toggleClass('menu-is-active')

});

/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
    $("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
    e.stopPropagation();
    return false;
});

/*----/----navigation icon animation*/

/*toggle menu*/
jQuery("#toggle-menu").click(function () {
    jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {

    if ($(window).width() < 850) {
        $(".nav").hide();
    } else {
        $(".nav").show();
    }
});
$("#toggle-menu").click(function (e) {
    e.stopPropagation();
    return false;
});
/*----/----toggle menu*/

/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
    transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
    scrollTime = 1; // scroll time in seconds

$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
    var target, avail, scroll, deltaScroll;

    if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
        target = $(this.hash);
        target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");

        if (target.length) {
            avail = $document.height() - $window.height();

            if (avail > 0) {
                scroll = target.offset().top;

                if (scroll > avail) {
                    scroll = avail;
                }
            } else {
                scroll = 0;
            }

            deltaScroll = $window.scrollTop() - scroll;

            // if we don't have to scroll because we're already at the right scrolling level,
            if (!deltaScroll) {
                return; // do nothing
            }

            e.preventDefault();

            if (transitionSupported) {
                $("html").css({
                    "margin-top": deltaScroll + "px",
                    "transition": scrollTime + "s ease-in-out"
                }).data("transitioning", scroll);
            } else {

                $("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
                .animate({
                    scrollTop: scroll + "px"
                }, scrollTime * 1000);

                return;
            }
        }
    }
});

if (transitionSupported) {
    $("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
        var $this = $(this),
            scroll = $this.data("transitioning");

        if (e.target === e.currentTarget && scroll) {
            $this.removeAttr("style").removeData("transitioning");

            $("html, body").scrollTop(scroll);
        }
    });
}
});
/*----/----Jump Scroll*/

/*contact let me know toggle*/
jQuery(".letmeknow").click(function () {
    jQuery(".container").slideToggle();
});
/*----/-----contact let me know toggle*/

});

HTML： 

<div class="header">
  <div class="navbar">

    <a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a>

    <a id="toggle-menu">
      <div>
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
    </a>

    <ul class="nav">
      <li><a href="" style="display: inline-block; width:100%;">Home</a></li>
      <li><a href="#panel9" style="display: inline-block; width:100%;">About</a></li>
      <li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li>
      <li><a href="#panel8" style="display: inline-block; width:100%;">Contact</a></li>
    </ul>
  </div>
</div>

<div class="maincontent">
  <div class="panel multiplepanels" id="panel1">
    <div class="inner"> 1 </div>
  </div>

  <div class="panel panel-blank multiplepanels" id="panel2">
    <div class="inner">
      <p>Work Title 1</p> <a href="" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>

  <div class="panel multiplepanels" id="panel3">
    <div class="inner">
      <p>Work Title 2</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>

  <div class="panel panel-blank multiplepanels" id="panel4">
    <div class="inner">
      <p>Work Title 3</p> <a href="" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>

  <div class="panel multiplepanels" id="panel5">
    <div class="inner">
      <p>Work Title 4</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>

  <div class="panel panel-blank multiplepanels" id="panel6">
    <div class="inner">
      <p>Work Title 5</p> <a href="" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>

  <div class="panel multiplepanels" id="panel7">
    <div class="inner">
      <p>Work Title 6</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>

  <div class="panel panel-blank multiplepanels" id="panel8">
    <div class="inner">
      <P>Like what I do?</P>
      <p><a href="#panel9" class="letmeknow" style="display: inline-block; width:100%;">Let me know</a></p>

      <div id='container'>
        <div class='signup'>
          <p> Send me a message </p>
          <form>
            <input type='text' placeholder='First:' />
            <input type='text' placeholder='Last:' />
            <input type='text' placeholder='Email:' />
            <input type='text' placeholder='Phone:' />
            <input type='submit' placeholder='SUBMIT' />
          </form>
        </div>
      </div>

      <div class="thank you">
        <p>Thank you for your message!</p>
      </div>

    </div>
  </div>

  <div class="panel multiplepanels" id="panel9">
    <div class="inner">
      <p>Social</p>
    </div>
  </div>

</div>

<footer>
  <div class="panel panel-blank" id="panel10">
    <div class="inner"> © 2015 thiswebsite.com</div>
  </div>
</footer>

1 个解决方案

解决方案1
 1 已采纳  2015-11-14 20:49:40

这是由于给.maincontent绝对定位而引起的。 这使得html不能成为文档的全部高度。 脚本依赖于此进行过渡。 因此，这里需要进行一些更改：

演示

从body （注）中取出点： 

.body {
  ...
}

在此处删除定位： 

.maincontent {
  width: 100%;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}

然后在此元素上按box-sizing以删除水平滚动条： 

.panel {
  width: 100%;
  background: #000000;
  color: #ffffff;
  height: 40em;
  padding: 3em;
  box-sizing: border-box;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery滚动动画在Chrome上跳跃 Flexslider 100％宽度创建水平滚动条 jQuery：滚动时宽度平滑变化 CSS- jQuery-向左滚动一个div，同时将另一个div扩展到宽度100％ 使用jQuery将宽度从100％更改为自动时的CSS过渡不起作用 使用jQuery或CSS将100％宽度的图像调整为垂直居中？ 身体和HTML高度为100％，会产生滚动问题 jQuery / CSS-将滑块更改为超过100％，但仍保留在div内 跳动到具有偏移的部分 无法断言css宽度为100％
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM