Question

我的jQuery代码设置了div“#date”顶部的偏移量，我希望偏移量是“#date”的底部。

https://jsfiddle.net/6RHys/271/embedded/result/

JS

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#date').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('#date').html($(this).find('.description').text()); //or any other way you want to get the date
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });

})

CSS

body {
    margin: 0px;
    padding: 25px;
    font-family: helvetica, arial;
    font-size: 9pt;
}

.holder {
    width: 100%;
}

.main {
    padding-left: 225px;
    width: 640px;
    font-family: helvetica, arial;
    font-size: 9pt;
    float: left;
} 

.info {
    width: 180px;
    font-family: helvetica, arial;
    font-size: 9pt;
    float: left;
    margin-left: 885px;
    position: fixed;
} 

p.content {
    width: 180px;
    border-top: 1px solid #CCCCCC;
    padding-bottom: 5px;
    padding-top: 5px;
    margin: 0px;
}

.post {
    border: 1px dashed grey;
    margin-right: 50px;
    margin-bottom: 20px;
}

#date {
    position:fixed;
    top:25px;
    right:20px;
    height: 90px;
    width: 45px;
    background: grey;
}

.Desc {
    width: 200px;
    font-family: helvetica, arial;
    font-size: 9pt;
    float: left;
    position: fixed;
    background: grey;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div class="holder">

        <div class="main">
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">content one description</p>
                Website Other Stuff
                <br/>Other Stuff
            </div>
            <div style='height:250px;' class='post'>
                <p class="description" style="display: none;">content two description</p>
                Packaging
            </div>
            <div style='height:350px;' class='post'>
                <p class="description" style="display: none;">content three description</p>
                Mobile Website
            </div>
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">content four description</p>
                Proposal Book
            </div>
            <div id='date'></div>
            <div style='height:800px;'></div>
        </div>
    </div>
</body>

Answer 1

获取偏移量加上高度并将其用于目标顶部位置

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var target = $('#date').offset().top + $('#date').height();
        $('.post').each(function () {
            if (target  >= $(this).offset().top && target  <= $(this).next().offset().top) {
                $('#date').html($(this).find('.description').text()); //or any other way you want to get the date
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });

})

jquery偏移设置为菜单底部

1 个答案: