如何将绝对定位的全宽图像向下推

Question

我正在尝试制作与 Voets Design 类似的效果，其全宽图像被导航向下推。

看这里：http://www.voetsdesign.com/

到目前为止，导航和图像看起来不错；唯一的问题是图像没有被下推，因为它是`position: absolute.

加价：

<nav class="clearfix">
        <div class="nav-wrapper">
        <ul class="clearfix">
            <li><a href="#">Home</a></li>
            <li><a href="#">How-to</a></li>
            <li><a href="#">Icons</a></li>
        </ul>
        <a href="#" id="btn">click</a>
        </div>
    </nav>

    <div class="image"></div>

看到这个fiddle：https://jsfiddle.net/uvxb53z8/1/

希望有人有解决办法。

Answer 1

一个解决方案，只是帮助一点（我自己 atm 有点忙）：

CSS:

.image.toggled{
    top: 300px;
}

jQ:

$(btn).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
    $('.image').toggleClass('toggled');
});

https://jsfiddle.net/uvxb53z8/2/

第二种解决方案是用下拉元素包裹内容。

Answer 2

有两个主要问题导致您的示例无法运行：

nav 应用了 position: absolute（两次，也在媒体查询中）。这样它就不会影响其他元素的布局，因为它已从文档流中取出。为此，您需要 relative。您会在 http://www.voetsdesign.com/ 上看到 .project-panel-header（下推图像的元素）也设置了 position: relative。

除此之外，nav 也有一个固定的高度 (40px)。它可能永远不会因此而压低你的形象，不管它的内容有多高。

$(function() {
    var btn        = $('#btn');
        menu       = $('nav ul');
        menuHeight = menu.height();
    
    $(btn).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
    
    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles */
html {
 height: 1500px;
}

body {
 background-color: #ece8e5;
 margin: 0;
}


/******** NAVIGATION ********/
nav {
 width: 100%;
 font-size: 11pt;
 font-family: Arial, sans-serif;
 font-weight: bold;
 position: relative;
 z-index: 9;
 display:block;
}

.nav-wrapper {
 width: 100%;
 margin: 0px auto;
 background-color: #455868;
}

.logo {
 width: 150px;
 height: 40px;
 background: #0CC;
 position: absolute;
}

nav ul {
 padding: 0;
 margin: 0 auto;
 width: 300px;
 height: 300px;
}
nav li {
 display: inline;
 float: left;
}
nav a {
 color: #fff;
 display: inline-block;
 width: 100px;
 text-align: center;
 text-decoration: none;
 line-height: 40px;
 text-shadow: 1px 1px 0px #283744;
}
nav li a {
 border-right: 1px solid #576979;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}
nav li:last-child a {
 border-right: 0;
}
nav a:hover, nav a:active {
 background-color: transparent;
}
nav a#btn {
 display: none;
}



/******** FULLSCREEN BCK ********/

.image {
background-image: url(http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 position: absolute;
 width: 100%;
 height: 100%;
 background-size: cover;
 background-color: #2b6c72;
}

/*Styles for screen 515px and lower*/
@media only screen and (min-width : 320px) {
 nav {
  border-bottom: 0;
  }

 nav ul {
  display: none;
  margin: 0 auto;
  width:300px
 }
 nav a#btn {
  display: block;
  background-color:#000;
  width: 100%;
  position: absolute;
  height:40px
 }
 nav a#btn:after {
  content:"";
  background: url('nav-icon.png') no-repeat;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 10px;
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav class="clearfix">
     <div class="nav-wrapper">
  <ul class="clearfix">
   <li><a href="#">Home</a></li>
   <li><a href="#">How-to</a></li>
   <li><a href="#">Icons</a></li>
  </ul>
  <a href="#" id="btn">click</a>
        </div>
 </nav>
    
    <div class="image"></div>

JSFiddle

Answer 3

请不要寻求使用 javascript 制作动画的解决方案。只需在容器中添加一个 class 并给容器一个 overflow: hidden;

然后您可以使用负边距和导航高度属性为图像底部属性设置动画，假设导航也有隐藏的溢出。

如何将绝对定位的全宽图像向下推

How to push absolute positioned full width image down

html

css

jquery

background-image