JQuery：Fix Div包括重新調整窗口大小

嗨我還在重新調整瀏覽器窗口的大小後，還在處理固定/固定的Div。修復Div是沒問題的，但我無法用jquery自動調整寬度。我當前的代碼是：JQuery：Fix Div包括重新調整窗口大小

<script type="text/javascript"> 
    $(window).load(function(){ 
     function fixDiv() { 
      var $cache = $('.pin'); 
      if ($(window).scrollTop() > 100) 
       $cache.css({'position': 'fixed', 'top': '10px', width: $('.pin-wrapper').width()}); 
      else 
       $cache.css({'position': 'relative', 'top': 'auto', width: $('.pin-wrapper').width()}); 
     } 
     $(window).scroll(fixDiv); 
     fixDiv(); 
    }); 
    $(document).ready(function(){ 
     fixDiv(); 
    }); 
    $(window).resize(function(){ 
     fixDiv(); 
    }); 
</script>

的HTML如下：

<div class="grid-12 parent"> <!-- Kolos 12.02.2014 --> 
     <div class="pin-wrapper"> 
       <div id="header" class="main-menu-container grid-12 hide-mobile pin"></div></div></div>

感謝您的幫助歡呼聲中，卡羅爾

來源

2014-05-12 Atelier Basel

您正在調用fixDiv（）很多次。 '$（window）.on（'load resize scroll'，fixDiv）;'就夠了。現在關於你的問題，你應該複製它在jsFiddle上。順便說一下''寬度'：$（'。header'）'沒有意義，你的選擇器'.header'看起來不對，等等...... –

@A。沃爾夫，謝謝你的回覆。它正在工作。 –

請將其解答並標記爲已解決。祝你們有個愉快的一天:) – jPO

您所面臨的範圍界定問題，正在申報的onload處理程序中fixDiv()方法。你也可以使用：

function fixDiv() { 
    var $cache = $('.pin'); 
    if ($(window).scrollTop() > 100) $cache.css({ 
     'position': 'fixed', 
     'top': '10px', 
     width: $('.pin-wrapper').width() 
    }); 
    else $cache.css({ 
     'position': 'relative', 
     'top': 0, 
     'width': $('#header').width() 
    }); 
} 
$(window).on('load resize scroll', fixDiv);

但在您發佈的HTML標記，它似乎比沒有與header類沒有元素，看起來像您正在使用的ID header目標元素。但是，#header與$cache是相同的元素，相當混亂。

來源

2014-05-12 10:54:30

對不起，但在這個改變後，div不再固定。 –

控制檯中出現@AtelierBasel錯誤？無論如何，如果您需要相關幫助，我們需要查看您的所有相關代碼。怎麼樣一個jsFiddle？！ –

我沒有看到''width'：$（'。header'）'沒有在他的代碼中的位置？ – Andrei

正如A.沃爾夫提到的，您不應該在load函數中添加事件。因爲你這樣做，你的滾動事件沒有被解僱。

你其實並不需要load在所有的可以在這裏看到：

http://jsfiddle.net/uwkc9/3/

如果scroll或resize，你會看到，無論工作。

此外，從實踐中，我建議將您的scroll和resize事件分開使用單獨的功能。在該功能中維護會更容易。

來源

2014-05-12 10:55:07 Andrei

JQuery：Fix Div包括重新調整窗口大小

回答

相關問題