当父div触摸浏览器底部时，将孩子固定在底部 [英] stick child to bottom when parent div touches the browser bottom

问题描述

当父div触摸浏览器底部时，我想将子div放到底部.

I want to stick child div to bottom when parent div touches the browser bottom.

P.S:应该在将父div向下推时发生，而不是在向下滚动时发生.

P.S : This should happen when the parent div is pushed down not when scrolled down.

例如，在我的演示中，有一个隐藏的内容面板.如果单击扩展链接，您将看到扩展的内容(将bottom_content div推到底部).

For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content (which is pushing the bottom_content div to the bottom).

但是手风琴只是一个例子，将会有其他一些元素将bottom_content div向下推.因此，我不想参考手风琴编写stick函数.

But accordion is just an example, there will be some other element which will be pushing the bottom_content div down. So I dont want to write stick function with reference to accordion.

仅当bottom_content div触摸浏览器底部并且页面中没有太多内容时，它才应向下贴，然后子div应该像bottom_content的子一样保持原状

It should stick down only when bottom_content div touches the bottom of the browser and when there is no much content in the page then the child div should stay as it is like child of the bottom_content

父级div:bottom_content
子div:footer

Parent div: bottom_content
Child div: footer

这是我当前使用的代码，不正确

Here is my code currently used, which is not proper

$('.expandble_conetnt a').click(function(event){
        event.preventDefault();
        $(this).next('span').slideToggle();     
    }); 

//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderbottom) {
            $('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
        } else {
            $('.footer').css({ position: 'static', bottom: '0px', width: '100%' });

        }
    });

演示

推荐答案

整个想法是在滚动window，调整大小window以及完成列表的.slideToggle()之后处理.footer位置:

The whole idea is to handle .footer position on window scrolling, on window resizing and after .slideToggle() for the list is completed:

小提琴.

var stickyHeaderbottom = $('.footer').offset().top;

$('.expandble_conetnt a').click(function()
{
    $(this).next('span').slideToggle(function()
    {
        handleBottom();
    });
    return false;
}); 

$(window).scroll(function()
{
    handleBottom();
});

$(window).resize(function()
{
    handleBottom();
});

function handleBottom()
{
    if ($(window).height() + $(window).scrollTop() < $(document).height())
    {
        $('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
    }
    else
    {
        $('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
    }
}

修改. 更新了小提琴，在打开列表后没有奇怪的页脚跳动.

Edit. Updated fiddle without weird footer jumping after list opening.

var stickyHeaderbottom = $('.footer').offset().top;

$('.expandble_conetnt a').click(function()
{
    var toggledElement = $(this).next('span');
    handleBottom(toggledElement.height());
    toggledElement.slideToggle(function()
    {
        handleBottom();
    });
    return false;
}); 

$(window).scroll(function()
{
    handleBottom();
});

$(window).resize(function()
{
    handleBottom();
});

function handleBottom(additionalHeight)
{
    var pageHeight = $(document).height();
    if (additionalHeight)
    {
        pageHeight += additionalHeight;
    }
    if ($(window).height() + $(window).scrollTop() < pageHeight)
    {
        $('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
    }
    else
    {
        $('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
    }
}

这篇关于当父div触摸浏览器底部时，将孩子固定在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！