affix

Affix is not working in Bootstrap 4 (alpha)

由 北战南征 提交于 2019-12-17 15:47:37
问题 According to Bootstrap 3 docs I have added following attributes to a navbar: <nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" > ... </nav> After scrolling down the page Bootstrap 4 is not adding class to navbar which is affix. Can anyone tell me how to solve this problem? Bootstrap.js and jQuery.js are working. 回答1: Although the affix is removed from Bootstrap in version 4. However, you can achieve your goal through this jQuery Code: $(window).on('scroll', function

Fixing navbar to top on scroll

由 空扰寡人 提交于 2019-12-13 08:38:02
问题 We are trying to fix the navbar of the page to the top of the viewport as soon as the scroll reaches it, and also, to prevent it from going over the footer. We are trying to do it via affix (Bootstrap plugin) but it doesn't seem to sort any effect. Can you give some advice? Here's the html of the sidebar: <div id="sidebar-wrapper" class="affix-top" data-spy="affix-top" data-offset-top="250"> <nav id="spy"> <ul class="sidebar-nav nav"> <li> <a href="#anchA" data-scroll> <span class="fa fa

Bootstrap 3: How to affix after 100% height

由 本秂侑毒 提交于 2019-12-12 16:24:30
问题 I am trying to get my navbar to affix to the top after an intro that is set at 100% height but I am unsure what is the best way to go about doing this? Code: CSS html, body{ height: 100%; min-height: 100%;} .intro {height: 100%;text-align: center;} HTML <div class="intro"> <div class="container"> <h1>Lorem Ipsum</h1> </div> </div> <nav> <div class="container"> <div class="navbar-header" data-spy="affix"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar

How to add auto scroll bar vertically to cssbootstrap affix menu for smaller screens?

由 前提是你 提交于 2019-12-11 04:37:25
问题 I am using css bootstrap affix plugin as a sticky menu on my site. I have lots of items on the menu which is not an issue on a desktop. However, when I view my site on a small laptop, the bottom half of my menu get cut off. I need to add an auto scroll bar to the menu when the screen is small. Here is my html code <div class="container"> <div class="row"> <nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column"> <ul class="nav nav-pills nav-stacked scrollspy affix-menu" id=

Sticky div that stays at bottom of the page when page is being scrolled

由 半世苍凉 提交于 2019-12-11 03:28:13
问题 When someone scrolls down our page, at a certain moment a div (with a cta button) comes into view. What i am trying to achieve is that this div, from that moment on, gets 'sticky' and scrolls down with the viewport, at the bottom of the viewport , if the site is beging scrolled down. This div then basically is, but not really, sort of a sticky footer as the rest of the site keeps on scrolling behind it. Now, i am having no problem in getting the div sticky at the top of the page, but thats

Bootstrap Affix Classes Jumping at Bottom

由 风流意气都作罢 提交于 2019-12-10 21:38:26
问题 I've managed to get the scrollspy and affix plugins to work just fine, but whenever the user scrolls to the bottom of the page (if using a small browser window) the affix classes start conflicting with another, and the affix jumps between states. An example can be seen here: http://devng.sdss.org/results-science/ The CSS is: .affix-top,.affix{ position: static; } #sidebar li.active { border:0 #eee solid; border-right-width:5px; } @media (min-width: 979px) { #sidebar.affix-top { position:

Twitter Bootstrap: Affix not triggering in single page application

由 a 夏天 提交于 2019-12-10 14:16:47
问题 I am doing a Single Page Application and using Twitter Bootstrap. I am trying to use the Affix like so: <div data-spy="affix" data-offset-top="100"> When I refresh the page, everything works fine, the bootstrap affix adds a class like so: <div class="affix-top" data-spy="affix" data-offset-top="100"> and after I go past 100px, it changes it to class="affix". However, if I click off this page and come back, it no longer adds any classes to my div. In fact, it does not trigger the function in

Bootstrap 3 affix navbar becomes transparent and unclickable when scrolling and overlapping content

由 倖福魔咒の 提交于 2019-12-07 09:59:37
问题 I'm sure it's very simple but I'm pretty new at Bootstrap and even html/css. I want my navbar to be after my header and fixed to the top when scrolling past it. I got this working, BUT: the navbar becomes transparent and unclickable when scrolling and above my other content. How do i overcome this? Here's my .html: ` <div id="nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="

Bootstrap 3.0 affix with list changes width

由 ￣綄美尐妖づ 提交于 2019-12-02 18:50:20
I'm migrating to bootstrap 3.0.0 and I'm having issues with an affixed menu to the left: as soon as it becomes affixed (after 10px scroll), its width changes. In this fiddle it gets smaller, in my real site it gets wider and expands on the actual content. It worked perfectly with bootstrap v2.3.2. After checking it looks like the list items don't play well with the .affix {position: fixed;} that appears. Any ideas? SOLUTION: based on the latest comments I have finally added this JS piece which fixes it nicely without having to set a fixed width to the affixed element: $(function() { var

Bootstrap's Affix menu with sub menus

由 一曲冷凌霜 提交于 2019-12-01 14:27:49
If you take a look at Twitter Bootstrap's Affix menu, then you'll see that it also has sub menu items. They only show when you click on one of the main menu items or when you scroll pass the titles that correspond to the sub menu item I have an Affix menu working on my site, but I would like to have the same sub menu functionality as you see on the Bootstrap site. How can i achieve the same thing? Is it standard functionality in BS 3.x? Or do I have to do this my self? If so, what would be a good approach? The scroll part is Bootstrap's ScrollSpy component. To customize the style of the active
订阅 affix