根據窗口大小更改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值

回答

相關問題