堆栈内存溢出
  繁体   English   中英

根据滚动更改 DIV 高度

[英]Changing DIV height based on scroll

 原文  2015-11-13 23:45:06  5   1    javascript/ jquery/ html/ css

问题描述

一旦用户滚动过标题，我就会尝试最小化我的导航栏。 我几乎可以走了，我只是需要一些关于如何在 div 缩小时处理元素的行高的建议。 此外，当不规则滚动时，导航栏会出现故障，有时即使我在页面顶部也会缩小。 有人可以帮我解决这个问题吗？ 非常感谢您提前。 索引.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>

样式文件

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


}

主文件

$(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 个解决方案

解决方案1
 1 已采纳  2015-11-14 00:03:39

由于您基本上有两个状态（不包括 500 和 550 像素之间的“过渡”状态），我强烈建议您放弃在 JS 中创建的所有手动 CSS 规则，在 CSS 中定义这两个状态（例如，作为一个类的 body 元素，或#site-header ），并使用 JS 仅根据滚动打开和关闭该类。

我这样做的另一个原因是避免动态设置 CSS 转换，并结合其他规则，因为这在一定程度上是随机的。 例如，您正在设置高度过渡以及高度本身，并且有可能首先实施/更改高度，然后实施过渡规则，但由于高度更改已经发生，因此什么也不会发生（希望这听起来不会太混乱）。

CSS3，虽然你可以做的动画类型非常有限，但比 JS 动画表现得更好，而且更容易控制。 当然，除非您正在处理 CSS3 无法完成的工作。

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

暂无
暂无

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

相关问题 根据滚动动态调整div高度 根据div高度加载更多滚动 根据滚动位置更改div内容 根据内容动态改变div元素的高度 根据内容动态更改div的高度 如何基于父div高度固定内部div的滚动位置 如何根据 javascript 中的滚动 position 动态更改 div 的高度？ jQuery根据滚动位置增加和减少div高度 降低滚动条上的div高度 滚动Div随着增加高度
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM