根据滚动更改DIV高度

时间：2015-11-13 23:45:07

标签： javascript jquery html css

我试图在用户滚过标题后最小化我的导航栏。我几乎要好好去，我只是需要一些关于如何在div缩小时处理元素的行高的建议。此外，当滚动不正常时，导航栏将出现故障，即使我位于页面顶部，有时仍会收缩。有人可以帮我解决这个问题吗？非常感谢你提前。 的的index.html 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Quench</title>

        <link rel="stylesheet" href="style.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="js/main.js" type="text/javascript"></script>
    </head>

    <body>

        <header id="site-header">
            <nav id="main-navigation">
                <ul class="soc" >
                    <li>Home</li>
                    <li>Specials</li>
                    <li>Location</li>
                    <li>Events</li>
                    <li class="social" style="text-align:center;">
                    <a class="soc-twitter" href="#"></a><a class="soc-facebook" href="#"></a><a class="soc-pinterest" href="#"></a>

                        </ul>
                    </li>
                </ul>
            </nav>


            <div class="logo">
            Quench
            <span>Satisfying Nightlife</span>
            </div>
            <div class="fore-glass">
            </div>
        </header>

        <section>
            <article>
                <header>
                <h2>Article Title</h2>
                </header>
                <p>Today massive amounts of penguins migrated to the warm waters of the Pacific Ocean</p>
            </article>

            <article>
                <header>
                <h2>Article Title 2</h2>
                </header>
                <p>German Sheperd kills man and small child walking in neighborhood park</p>
            </article>
        </section>

        <aside>
            <h2>About Section</h2>
            <p>Welcome to Quench the greatest site ever known to man</p>
        </aside>

        <div style="height:2000px"></div>

        <footer>
        Copyright 2015-2016 Quench.
        </footer>
    </body>

</html>

的style.css 

@import url(https://fonts.googleapis.com/css?family=Montserrat);

html, body {
margin:0;
padding:0;
background:#130806;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
color:#fff;
}

* {
    margin:0;
    padding:0;
}


img {
    max-width:100%;
}

footer {
background:#000;
color:#fff;
}

header#site-header {
background:url(images/bar-background.jpg);


background-size:100% 600px;
background-repeat:no-repeat;
background-attachment:fixed;
color:white;
width:100%;
height:600px;
position:relative;
overflow:hidden;

}

header#site-header .fore-glass {
    position:absolute;
    background:url(images/bar-glass.png);
    background-position: center top;
    background-size:25% 100%;
    background-repeat:no-repeat;
    right:6%;
    bottom:10%;
    width:50%;
    height:70%;
    z-index:6;


}

header#site-header .logo {
    position:absolute;
    top:50%;
    left:10%;
    color:#fff;
    font-size:90px;
    font-weight:900;
    width:500px;
    height:200px;
    text-align:center;
    margin-top:-100px;
    line-height:1;

}

header#site-header .logo span {
    font-size:80px;
    font-weight:500;
    font-style:italic;
    opacity:.7;
    color:#607927;
}

header#site-header nav#main-navigation {
    width:100%; 
    background:#607927;
    height:100px;
    font-size:24px;
    position:fixed;
    z-index:5;
    transition : all 100ms ease-in-out;

}

header#site-header nav#main-navigation li {
    list-style:none;
    position:relative;
    display:inline-block;
    float:left;
    width:20%;
    vertical-align:middle;
    text-align:center;
    line-height:100px;
    font-family: 'Montserrat', sans-serif;
}
header#site-header nav#main-navigation li.social {
    margin-top:15px;
    line-height:100px;
}

header#site-header nav#main-navigation ul li ul > li {
    display:block;
    float:none;
    position:relative;
    width:100%;
}


/* Social */


@font-face {
    font-family: 'si';
    src: url('fonts/socicon.eot');
    src: url('fonts/socicon.eot?#iefix') format('embedded-opentype'),
         url('fonts/socicon.woff') format('woff'),
         url('fonts/socicon.ttf') format('truetype'),
         url('fonts/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(PATH_TO/socicon.svg) format(svg);
    }
}

.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
    text-align:right;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;

    text-align:right;


}

.soc li a {

    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    color: #ffffff;
    background-color: none;
    display:inline-block;

}

  .soc li a.soc-pinterest {
      margin-right:0px;
  }

.soc-icon-last{
    margin:0 !important;
}

.soc-twitter {
    background-color: #41501B;
}
.soc-twitter:before {
    content:'a';
}
.soc-facebook {
    background-color: #41501B;
}
.soc-facebook:before {
    content:'b';
}
.soc-google {
    background-color: #d93e2d;
}
.soc-google:before {
    content:'c';
}
.soc-pinterest {
    background-color: #41501B;
}
.soc-pinterest:before {
    content:'d';
}
.soc-linkedin {
    background-color: #3371b7;
}
.soc-linkedin:before {
    content:'j';
}
.soc-rss {
    background-color: #f26109;
}
.soc-rss:before {
    content:',';
}

.soc-twitter:hover {
    background-color: #3993ca;
}
.soc-facebook:hover {
    background-color: #2a4784;
}
.soc-google:hover {
    background-color: #c52a19;
}
.soc-pinterest:hover {
    background-color: #b51205;
}
.soc-linkedin:hover {
    background-color: #1f5da3;
}
.soc-rss:hover {
    background-color: #de4d00;
}




article {
    padding:100px 0;
    max-width:640px;
    margin: 0 auto;
    text-align:center;


}

main.js 

$(document).ready(function(){

$(window).scroll(function(e){

  var scroll = $(window).scrollTop();

  $(".logo").css({

     "transform" : "translate(0px, "+ scroll / 2 +"%)"

  });   

  $("header#site-header .fore-glass").css({
      "transform" : "translate(0px, "+ scroll / 4 +"%)"
  });

  $("header#site-header .fore-glass").css({
      "opacity" : 1-(scroll / 600)
  });




   var mainNav = $("header#site-header nav#main-navigation");
   var navHeight = $(mainNav).height();
   var navItems = $("header#site-header nav#main-navigation li");
   var socialItem = $("header#site-header nav#main-navigation li.social");
   var socialText = $("header#site-header nav#main-navigation li.social span");


  if(scroll >= 500){

      var navNewHeight = (scroll < 550) ? 100 - (scroll - 500) + "px" : "50px";
      console.log("Scroll:" + scroll);

      $("header#site-header nav#main-navigation li:first-child").css({
          "transition" : "all 100ms ease-in-out",
          "font-weight" : "bold"
      });

      mainNav.css({
         "transition" : "all 300ms ease-in-out",
         "height" : navNewHeight 

         });

      navItems.css({
          "transition" : "all 100ms ease-in-out",
          "line-height" : navNewHeight
      });

       socialItem.css({
           "transition" : "all 100ms ease-in-out",
           "line-height" : navNewHeight/2
       });

      socialText.css({
          "display" : "none"
      })



  }



});

});

这是小提琴链接

http://jsfiddle.net/AFTef/1101/

TLDR 寻找有关如何在用户滚过标题时更新主导航的行高的建议。

此外，如何解决问题，如果您使用滚动条的速度非常快，那么当标题应该是全尺寸时，标题可以最小化？

1 个答案:

答案 0 :(得分：1)

由于你基本上有两种状态（不计算＆＃34;过渡＆＃34; 500和550像素之间的状态），我强烈建议你放弃在JS中创建的所有手动CSS规则，定义两个CSS中的状态（例如，作为body元素的类，或#site-header），并且仅使用JS基于滚动来打开和关闭该类。

我执行此操作的另一个原因是避免动态设置CSS过渡，并结合其他规则，因为这可能会导致一定程度的随机性。例如，您正在设置高度转换以及高度本身，并且可能首先实现/更改高度，并且转换规则将在第二个实现，但是由于高度已经变高，所以不会发生任何事情发生了（希望这听起来不会太混乱）。

CSS3虽然对你可以做的动画类型非常有限，但它的表现比JS动画更好，而且控制起来要简单得多。当然，除非你正在研究CSS3无法做到的事情。

这是我的意思的简单例子：http://jsfiddle.net/AFTef/1102/

相关问题
最新问题