如何在特定條件下從元素中刪除Bootstrap Affix？

我有一個元素，我在使用Twitter Bootstrap Affix插件。如果窗口被垂直調整大小到小於項目高度的位置，我想從元素中刪除附加功能，因爲您無法在窗口中看到它的全部內容。如何在特定條件下從元素中刪除Bootstrap Affix？

到目前爲止，我已經在控制檯中試過這個，看看它是否可以被刪除，但它似乎沒有工作。

$("#myElement") 
    .removeClass("affix affix-top affix-bottom") 
    .removeData("affix"); 

$(window) 
    .off("scroll.affix.data-api, click.affix.data-api");

也許我正在談論這個錯誤的方式？我如何以編程方式從已經應用的元素中刪除詞綴？

來源

2013-03-12 Chris Barr

我最終選擇了CSS解決方案，類似於@MarcinSkórzewski的建議。

當窗口的高度小於元素的高度時，這隻會添加一個新類。

var sizeTimer; 
$(window).on("resize", function() { 
    clearTimeout(sizeTimer); 
    sizeTimer = setTimeout(function() { 
     var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height(); 

     if (isWindowTallEnough) { 
      $overviewContainer.removeClass("affix-force-top"); 
     } else { 
      $overviewContainer.addClass("affix-force-top"); 
     } 

    }, 300); 
});

然後在CSS，這個類只是被添加：

.affix-force-top{ 
    position:absolute !important; 
    top:auto !important; 
    bottom:auto !important; 
}

編輯

對於引導3，這似乎是有效的：

$(window).off('.affix'); 
$("#my-element") 
    .removeClass("affix affix-top affix-bottom") 
    .removeData("bs.affix");

來源

2013-03-12 21:43:38

感謝您的Bootstrap 3編輯，這對我來說非常合適 – Smegger 2014-04-09 09:34:41

對我來說也是如此。謝謝 – Nizam 2014-05-08 10:12:33

謝謝你。僅供參考 - 如果我在元素開始添加之前運行'$（window）.off（'。affix'）;'，則不需要刪除這些類，如果這是有意義的。 – thekingoftruth 2015-03-19 17:41:13

不贊成：答案指的是Twitter Bootstrap v2。當前版本是v4。

有幾個選項可以嘗試。

使用功能data-offset-top。通常，您使用整數值來滾動像素的數量來修復元素。根據documentation你可以使用JS函數，它將動態計算偏移量。在這種情況下，您可以根據您選擇的條件使您的功能返回不同的數字。
使用media query來覆蓋小窗口的粘貼CSS規則（例如高度200px或更小）。

我覺得，第二個變種應該適合你。喜歡的東西：

@media (max-height: 200px) { 
    .affix { 
    position: static; 
    } 
}

如果你想你的問題他人提供的jsfiddle可以嘗試真正解決它，而不是給只是理論上的建議，可能會或可能無法正常工作。

PS。 Bootstrap的導航欄組件使用最大寬度的媒體查詢來禁用小設備的固定樣式。這樣做不錯，不僅僅是因爲屏幕尺寸對於導航欄來說很小，而且在移動設備上也是如此。請看bootstrap-responsive.css文件中的navbar。

來源

2013-03-12 20:48:21

我喜歡這個想法，但媒體查詢將是一個硬編號，並且無法確定元素的高度是否小於窗口高度。同樣，'top'屬性*的功能可以工作，但它仍然會返回一個數字以開始粘貼。我需要它全能的不再附加。 – 2013-03-12 21:31:56

當你不想修復你的菜單時，你仍然應該能夠通過返回非常大的數字來使用偏移功能。 Bootstrap的組件意味着易於啓動，而不是完整的解決方案。如果你需要更多的東西，那麼如果你對JS/jQuery有點熟悉，那麼自己修改元素位置的實現是一件容易的事情。因此，不用修補詞綴，使用'on（「scroll」，...）'來修復/解除修飾可能更好。 – 2013-03-12 22:07:26

我認爲是一個好主意，在位置右側添加一個「！important」：static。這樣你將覆蓋現有的類設置。 – BernieSF 2015-01-23 20:59:56

根據@fat（bootstrap-affix的作者），您的$(window).off已接近。js）你可以像這樣禁用插件：

$(window).off('.affix');

這將禁用詞綴插件。

參見：https://github.com/twitter/bootstrap/issues/5870

來源

2013-06-06 04:41:08 dcPages

但是，這會禁用所有粘貼的塊。 – Paul 2015-10-16 13:38:23

在自舉的1890線是一個條件爲是否應該防止默認操作。這使您可以傾聽事件，如果遇到某些情況，請避免發生詞綴。

線從1890年舉：如果（e.isDefaultPrevented（））返回

例子：

$('someselector') 
.affix() 
.on(
    'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix' 
    , function(evt){ 
     if(/* some condition */){ 
      evt.preventDefault(); 
     } 
    } 
);

來源

2014-05-06 16:52:45 nick

此答案包含應該在Bootstrap文檔中的信息。我正在尋找一種方法來切換詞綴，就是這樣。其他解決方案要麼消除所有元素的詞綴，要麼不必要的複雜。 – Paul 2015-10-16 13:44:51

即使這是說，我只是想給我的這個解決方案，以防有人遇到了和我一樣的情況。

我將偏移頂部選項修改爲一個荒謬的數字，永遠不會滾動到。這使得我不必做$（window）.off（'。affix'）;並禁用一切的詞綴。

$('#element-id').data('bs.affix').options.offset.top = 1000000000;

來源

2016-12-19 20:35:00

如何在特定條件下從元素中刪除Bootstrap Affix？

回答

相關問題