Question

我有一个div（底部中心的白色箭头），当大响应图像突出到底部的视口（宽视图）时，它应该粘在浏览器窗口的底部，但是箭头的最低位置应该是图像的底端（窄视图）。

我的问题是：当浏览器窗口较宽时，箭头的位置（当前总是粘在窗口的底部）很好，但是当窗口变小时，最低位置应该是图像的底端，而不是底部的窗口。

HTML

<div class="scroll-down"><a href="#content"></a></div>


<div class="rslides_container">

    <ul class="rslides">
        <li><img src="http://chrismagiera.de/dev/img/IMG_20140125_121738.jpg" /></li>
    </ul>

</div>


<section id="subsite" role="main">

    <div class="span2" id="content">

        <p>This is some content.</p>

    </div>

    <div class="span2">

        <p>This is some content.</p>

    </div>


</section>

CSS

body {
    margin: 0;
    background: #e2e2e2;
}

section {
    margin: 0 auto;
    width: 1020px;
}

.span2 {
    float: left;
    margin: 0 10px;
    width: 490px;
}

.scroll-down,
.scroll-down a {
    display: block;
    position: absolute;
    width: 50px;
    height: 65px;
}

.scroll-down {
    bottom: -25px;
    left: 50%;
    margin-left: -25px;
    z-index: 1000;
    background: url('http://chrismagiera.de/dev/img/arrow-down.svg') no-repeat;
}

.rslides_container {
    position: relative;
    float: left;
    width: 100%;
}

.rslides {
    position: relative;
    display: block;
    float: left;    
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: relative;
    display: block;
    float: left;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
    margin-bottom: 10px;
}

的jQuery

$(window).scroll(function() {

    if ($(this).scrollTop()>0){
        $('.scroll-down').fadeOut(800);
    }
    else {
        $('.scroll-down').fadeIn();
    }
});

$('.scroll-down a').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 600);
});

实时： http://chrismagiera.de/dev/

屏幕截图包含一些注释： http://chrismagiera.de/dev/position-div.jpg

希望你们中的一些人可以帮忙！

Answer 1

您需要在图像的div容器中包含向下滚动。图像的div容器必须具有相对位置，箭头位置必须是绝对的。（它们已经是）然后位置将与图像容器的高度相关，而不是窗口。而且我认为你必须要监听事件加载和调整大小。调整窗口大小时，您必须计算箭头必须在哪里。或者其他方式是让你的代码只改变箭头的位置。在容器内或外面。

<div class="rslides_container">

    <ul class="rslides" id="slider4">
        <li><img src="http://chrismagiera.de/dev/img/IMG_20140125_121738.jpg" /></li>
    </ul>
    <div class="scroll-down"><a href="#content"></a></div>
</div>

<script>
var repositionArrow = function () {
    var slider_height = $(".rslides_container").height();
    var window_height = $(window).height();
    if(window_height < slider_height) {
        $(".scroll-down").css("bottom",(slider_height-window_height)+"px");
        $(".scroll-down").css("top", "inherit");
    }
    else {
        $(".scroll-down").css("bottom", "inherit");
        $(".scroll-down").css("top", slider_height+"px");

    }
};

$(window).load(function() {   
    repositionArrow();    
});
$(window).resize(function() {   

    repositionArrow();
});
</script>

解决方案： http://jsfiddle.net/A4Xd6/6/ - ＆gt;计算相对于窗口和图像的位置的示例

Answer 2

只需根据元素高度检查窗口高度。

固定小提琴http://jsfiddle.net/A4Xd6/2/或http://jsfiddle.net/A4Xd6/4/

var i = $(".slide");
if(i.height() < $(this).height()) { }

绝对定位 - 先进

2 个答案:

固定小提琴http://jsfiddle.net/A4Xd6/2/或http://jsfiddle.net/A4Xd6/4/