根据窗口大小更改Jquery值

请参阅JSFiddle Example其中我使用脚本将绝对位置div更改为当用户滚动超过300像素时修复。我怎么能够改变300取决于其父母的大小？根据窗口大小更改Jquery值

jQuery(function($) { 
    function fixDiv() { 
     var $cache = $('.getFixed'); 
     if ($(window).scrollTop() > 300) 
     $cache.css({'position': 'fixed', 'top': '0px'}); 
     else 
     $cache.css({'position': 'absolute', 'top': '300px'}); 
    } 
    $(window).scroll(fixDiv); 
    fixDiv(); 
});

我觉得可能需要一个窗口大小调整功能，虽然我不知道如何传递一个值到滚动脚本来更改该用户滚动经过。

任何帮助，非常感谢！

来源

2014-06-23 Liam88

要回答你的问题的两个部分：

jQuery(function($) { 
    function fixDiv() { 
     var $cache = $('.getFixed'); 
     var theHeight = $cache.parent().height(); 

     if ($(window).scrollTop() > theHeight) 
     $cache.css({'position': 'fixed', 'top': '0px'}); 
     else 
     $cache.css({'position': 'absolute', 'top': theHeight+'px'}); 
    } 
    $(window).scroll(fixDiv); 
    fixDiv(); 

    $(window).resize(function() { 
     var width = $(this).width(); 
     var parentWidth = $(this).offsetParent().width(); 
     var percent = 100*width/parentWidth; 
     $("#image").width(percent+"%"); 
    }); 
});

我用resize()功能改变div的宽度。

来源

2014-06-23 04:51:09 TribalChief

太棒了！谢谢。此外，我希望调整div #image相对于其内部的实际图像。在窗口上调整由于backgrounf大小造成的图像内部变化，尽管我正在寻求让div本身与图像成比例地变化？你能帮我吗？再次感谢 – Liam88

不客气！但是，我对你需要什么感到困惑。上面的代码根据窗口大小调整'div'（'image'）。你能详细说明一下吗？ – TribalChief

我实现了你的代码，当我手动改变父div的高度时工作。虽然当我调整窗口的大小时，图像会缩小，但div不会，因此黑盒子div＃scroll-element不会跟着。我需要#image div以调整大小的图像缩小，以便绝对定位的div＃scroll-element始终保留在其父div #image的底部。那有意义吗？ @Thauwa – Liam88

如果你想要$ cache元素的父类，那么你可以使用$ cache.parent（）;

如果你想获得一个元素的高度或宽度，那么你可以使用$ el.width（），$ el.innerWidth（），$ el.height（），$ el.innerHeight（）

您可以使用这些计算图像的高度和相关位置

jQuery(function($) { 
    function fixDiv() { 
     var $cache = $('.getFixed'); 
     var offsetTop = $('#image').height() + $('#image').offset().top; 
     if ($(window).scrollTop() > offsetTop) 
     $cache.css({'position': 'fixed', 'top': '0px'}); 
     else 
     $cache.css({'position': 'absolute', 'top': offsetTop + 'px'}); 
    } 
    $(window).scroll(fixDiv); 
    fixDiv(); 
});

来源

2014-06-23 04:39:11

根据窗口大小更改Jquery值

回答

相关问题