詞綴未在自舉4阿爾法

Question

工作根據我已添加下列屬性到一個導航欄引導3文檔：

<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > 
... 
</nav> 

向下滾動引導4不加入類的Navbar是詞綴頁面後。誰能告訴我如何解決這個問題？ Bootstrap.js和jQuery.js正在工作。

Answer 1

雖然詞綴從引導版本4.刪除但是，您可以通過這個jQuery代碼實現自己的目標：

$(window).on('scroll', function(event) { 
    var scrollValue = $(window).scrollTop(); 
    if (scrollValue == settings.scrollTopPx || scrollValue > 70) { 
     $('.navbar').addClass('navbar'); 
    } 
}); 

Answer 2

From the bootstrap v4 documentation:

掉落詞綴jQuery插件。我們建議使用position: sticky填充。 See the HTML5 Please entry瞭解詳細信息和特定的填充建議。

如果您使用Affix來應用其他非position樣式，則polyfills可能不支持您的用例。這種用途的一個選擇是第三方庫。

Answer 3

更新引導4

該文檔推薦粘性polyfill和推薦的ScrollPos-Styler並沒有真正幫助滾動位置（您可以輕鬆定義偏移量）。

我認爲這是容易使用jQuery相應觀看窗口滾動和更改CSS固定...

var toggleAffix = function(affixElement, wrapper, scrollElement) { 

    var height = affixElement.outerHeight(), 
     top = wrapper.offset().top; 

    if (scrollElement.scrollTop() >= top){ 
     wrapper.height(height); 
     affixElement.addClass("affix"); 
    } 
    else { 
     affixElement.removeClass("affix"); 
     wrapper.height('auto'); 
    } 

    }; 


    $('[data-toggle="affix"]').each(function() { 
    var ele = $(this), 
     wrapper = $('<div></div>'); 

    ele.before(wrapper); 
    $(window).on('scroll resize', function() { 
     toggleAffix(ele, wrapper, $(this)); 
    }); 

    // init 
    toggleAffix(ele, wrapper, $(window)); 
    }); 

Bootstrap 4 affix (sticky navbar)

編輯：另一個解決方案是使用port of the 3.x Affix plugin作爲Bootstrap 4的替代品..

http://www.codeply.com/go/HmY7DLHLkI

Answer 4

根據Muckgation文檔中Vucko的報價，ScrollPos-Styler庫適合我很好。

1. 包括.js ScrollPos-Styler（scrollPosStyler.js）文件到您的頁面。
2. 找到要做好相關<div> '粘性'

<nav class="navbar navbar-toggleable-md">

應用sps sps--abv類

<nav class="navbar navbar-toggleable-md sps sps--abv">

添加.css您希望的款式在元素變粘時引發觸發（按照demo page。

---

/** 
* 'Shared Styles' 
**/ 
.sps { 

} 

/** 
* 'Sticky Above' 
* 
* Styles you wish to apply 
* Once stick has not yet been applied 
**/ 
.sps--abv { 
    padding: 10px 
} 

/** 
* 'Sticky Below' 
* 
* Styles you wish to apply 
* Once stick has been applied 
**/ 
.sps--blw { 
    padding: 2px 
} 

Answer 5

要建立在安瓦爾·侯賽因的回答。我發現這個成功：

$(window).on('scroll', function (event) { 
    var scrollValue = $(window).scrollTop(); 
    if (scrollValue > 120) { 
     $('.navbar').addClass('affix'); 
    } else{ 
     $('.navbar').removeClass('affix'); 
    } 
}); 

向下滾動時，這將類應用到導航欄，但滾動備份時也會刪除類。以前，當滾動備份時，應用的類將保持應用於導航欄。

Answer 6

$(window).on('scroll', function (event) { 
    var scrollValue = $(window).scrollTop(); 
    var offset = $('[data-spy="affix"]').attr('data-offset-top'); 
    if (scrollValue > offset) { 
     $('[data-spy="affix"]').addClass('affix-top'); 
     var width = $('[data-spy="affix"]').parent().width(); 
     $('.affix-top').css('width', width); 
    } else{ 
     $('[data-spy="affix"]').removeClass('affix-top'); 
    } 
}); 

Answer 7

嘗試每一個解決方案，我可以找到（並且是意識到詞綴從引導4刪除）後，我能得到我所需要的所需粘結果的唯一方法是使用sticky-kit。

這是一個非常簡單的jQuery插件，易於設置。

只包含的代碼在您的項目，然後分配要堅持

$("#sidebar").stick_in_parent(); 

Answer 8

對於誰是尋找在純JavaScript回答用戶的元素，這是你如何通過使用純做Javascript：

window.onscroll = (e) => { 
    let scrollValue = window.scrollY; 
    if (scrollValue > 120) { 
     document.querySelector('.navbar').add('affix'); 
    } else{ 
     document.querySelector('.navbar').remove('affix'); 
    } 
}