I'm trying to make fixed navigation bar with modifying Bootstrap CSS file. If I scroll down, navbar's color should be changed and fixed to the top.
So I've added following JS code by referring to this article but it doesn't work.
let MQL = 992;
if ($(window).width() > MQL) {
let headerHeight = $("#mainNav").height();
$(window).scroll(function () {
if ($(document).scrollTop() > headerHeight) {
$("#mainNav").addClass("is-visible");
} else {
$("#mainNav").removeClass("is-visible");
}
});
}
#mainnav is CSS for navigation bar, and is-visible is CSS animation for displaying navbar. 992 is mininum width for desktop screen.
JSFIDDLE
How to I solve this?
Please check the working solution here.
var headerHeight = $(".clearHeader").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= headerHeight) {
$(".clearHeader").addClass("is-visible");
}else{
$(".clearHeader").removeClass("is-visible");
}
});
.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.is-visible {height: 100px;background-color:#1e1e1e}
.wrapper {
height:2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="clearHeader">
</header>
<div class="wrapper">
</div>
Related
I wan't to make a special menu for the iPad version of my website.
It should work like this:
http://itu.dk/people/mbul/humlum/images/ipad_menu.png
Click on IMG 1 and the menu expands (to IMG 2) and the links gets visible. When you click outside IMG 2 it disappears along with the links so only IMG 1 is visible.
I've come this far but it doesn't really do the trick:
<div class="nav_mobile_container">
<div class="nav_mobile_elements">
<div class="nav_mobile"></div>
</div>
</div>
div.nav_mobile_container{
position: fixed;
top: 0px;
left: 0px;
}
div.nav_mobile_elements{
display: inline-block;
}
div.nav_mobile_elements a{
vertical-align: top;
display: inline-block;}
div.nav_bookmark:hover{
display: inline-block;
}
.nav_mobile{
width:70px;
height:70px;
background-image:url('images/menu_small.png');
display: inline-block;
}
.nav_mobile:hover{
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
I would really appreciate a CSS solution on this if possible.
Thank you!
The closest you can get is
#nav_mobile:active {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
But that does not work on an ipad.
I recommend to use a bit of javascript.
Create an onclick event that displays a div with all the navigation information you need.
With jquery:
$("#small_navigation").click(function(){
$("#big_navigation").show();
});
The css:
#big_navigation {
display: none;
width: ...
height: ...
etc...
}
You will need javascript for this. Using jQuery, this is how you could make it :
First, don't set an :hover in your CSS, but just make a class that you will add on click :
.nav_mobile.navopen {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
And then a bit of jQuery to make it work :
$(document).ready(function(){
// expend the menu on click
$('.nav_mobile').on('click', function(event){
event.stopPropagation();
$(this).addClass('navopen');
});
// close menu on click outside the menu
$('html').click(function() {
$('.nav_mobile').removeClass('navopen');
});
});
The jsFiddle demo
Edit : with pure javascript
window.onload = function() {
var menu = document.getElementsByClassName('nav_mobile')[0];
menu.onclick=function(e){
e.stopPropagation();
menu.className = "nav_mobile navopen";
};
var html = document.getElementsByTagName('html')[0];
html.onclick=function(){
menu.className = "nav_mobile";
};
};
I'd like to create a responsive left-hand menu, like the menu on Yahoo's Pure CSS site.
In other words, it should look like this on desktop:
And collapse like this on narrower screens:
Oddly, although this menu is prominent on the Pure site, it doesn't actually seem to be part of the Pure framework.
I've been struggling with the CSS to replicate it, looking at Yahoo's source - this is as far as I've got: http://jsfiddle.net/WZt4z/
It's part-way there, but I don't understand how they have styled the body of the page so it's in the right place, and got rid of the scrollbars on the menu.
Here is the HTML in the JSFiddle:
<a href="#menu" id="menuLink" class="pure-menu-link">
<img src="/img/navicon-png2x.png" width="20" alt="Menu toggle">
</a>
<div class="pure-u" id="menu"> <!-- contents of menu --> </div>
<div class="pure-u-1" id="main"> <!-- contents of body of page --> </div>
And the CSS:
#menu {
margin-top: 31px;
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 150px;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: grey;
overflow-y: auto;
-webkit-overflow-scroll: touch;
}
.pure-menu-link {
display: none; /* show this only on small screens */
top: 0;
left: 150px; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
padding: 0.75em 1em;
}
#media (max-width: 470px)
... responsive styles
You're running into problems because the side menu layout they built has multiple classes and ids that you are not including. Specifically you need the "layout" id:
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
Additionally for the menu to work properly you need to include the javascript for it:
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for(; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
menuLink.onclick = function (e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
};
}(this, this.document));
The javascript uses the ids to update the css when you hit the media breakpoint (screen gets too small) so if you don't have all the necessary ids ("layout", "menu", "menuLink") the javascript will break as well.
I updated the fiddle you posted with the necessary code (I pulled it straight from the site at purecss.io).
Here's the working fiddle: http://jsfiddle.net/schmanarchy/WZt4z/3/
The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a paragraph / page heading, and upon scrolling down it should first scroll along until reaching the top of the page, and then stick there fixed for further scrolldowns.
As jsFiddle does not work with the navbar concept, I've set up a separate page for usage as a minimal example: http://i08fs1.ira.uka.de/~s_drr/navbar.html
I use this as my navbar:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
I thinkg i would want data-offset-top to be of value 0 (since the bar should "stick" to the very top" but with 50 there is at least some effect watchable.
If also put the javascript code in place:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Any help appreciated.
I was having a similar problem, and I believe I found an improved solution.
Don't bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix():
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.
You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100% on the nav element since .nav elements with position: fixed misbehave for some reason:
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a div whose height I set to be equal to the navbar at runtime:
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$('#nav-wrapper').height($("#nav").height());
Here's the obligatory jsFiddle to see it in action.
Just implemented this for the first time, and here's what I've found.
The data-offset-top value is the amount of pixels that you must scroll in order for the affixing effect to take place. In your case, once 50px is scrolled, the class on your item is changed from .affix-top to .affix. You'd probably want to set data-offset-top to about 130px in your use case.
Once this class change occurs, you must position your element in css by styling the positioning for class .affix. Bootstrap 2.1 already defines .affix as position: fixed; so all you need to do is add your own position values.
Example:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
To fix this very issue I have modified the affix plugin to emit a jQuery event when an object is affixed or unaffixed.
Here is the pull request: https://github.com/twitter/bootstrap/pull/4712
And the code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
And then do this to attach the navbar:
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>
You need to remove .affix() from your script.
Bootstrap gives the option of accomplishing things either via data-attributes or straight JavaScript most of the time.
I've got this from the twitterbootstrap's source code and it's working pretty well:
HTML:
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS:
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS:
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
You just need to remove the script. Here is my example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<style>
#content {
width: 800px;
height: 2000px;
background: #f5f5f5;
margin: 0 auto;
}
.menu {
background: #ccc;
width: 200px;
height: 400px;
float: left;
}
.affix {
position: fixed;
top: 20px;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div id="content">
<div style="height: 200px"></div>
<div class="affix-top" data-spy="affix" data-offset-top="180">
<div class="menu">AFFIX BAR</div>
</div>
</div>
</body>
</html>
Thanks to namuol and Dave Kiss for the solution.
In my case I had a tiny problem with navbar height and width when I used afflix and collapse plugins together. The problem with width can be easily solved inheriting it from parent element (container in my case). Also I could manage to make it collapsing smoothly with a bit of javascript (coffeescript actually). The trick is to set wrapper height to auto before collapse toggle occurs and fix it back after.
Markup (haml):
#wrapper
#navbar.navbar
.navbar-inner
%a.btn.btn-navbar.btn-collapse
%span.icon-bar
%span.icon-bar
%span.icon-bar
#menu.nav-collapse
-# Menu goes here
CSS:
#wrapper {
width: inherit;
}
#navbar {
&.affix {
top: 0;
width: inherit;
}
}
Coffeescript:
class Navigation
#initialize: ->
#navbar = $('#navbar')
#menu = $('#menu')
#wrapper = $('#wrapper')
#navbar.affix({offset: #navbar.position()})
#adjustWrapperHeight(#navbar.height())
#navbar.find('a.btn-collapse').on 'click', () => #collapse()
#menu.on 'shown', () => #adjustWrapperHeight(#navbar.height())
#menu.on 'hidden', () => #adjustWrapperHeight(#navbar.height())
#collapse: ->
#adjustWrapperHeight("auto")
#menu.collapse('toggle')
#adjustWrapperHeight: (height) ->
#wrapper.css("height", height)
$ ->
Navigation.initialize()
My solution for attach the navbar :
function affixnolag(){
$navbar = $('#navbar');
if($navbar.length < 1)
return false;
h_obj = $navbar.height();
$navbar
.on('affixed', function(){
$navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
})
.on('unaffixed', function(){
if($('#nvfix_tmp').length > 0)
$('#nvfix_tmp').remove();
});
}
Similar to the accepted answer, you can also do something like the following to do everything in one go:
$('#nav').affix({
offset: { top: $('#nav').offset().top }
}).wrap(function() {
return $('<div></div>', {
height: $(this).outerHeight()
});
});
This not only invokes the affix plugin, but will also wrap the affixed element in a div which will maintian the original height of the navbar.
I'm trying to find a solution how to vertically align image in a div with 100% height (I don't know it's height).
I've got this HTML. I can't do much with HTML except add more wrappers:
<div id="wrapper">
<img src="http://www.lovecpokladu.cz/nalezy/9687/5.jpg" alt="" />
</div>
And this quite fixed CSS - primary I need to accomplish that the image doesn't overflow browser's window in all browsers:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
background: #ddd;
}
img {
max-width: 100%;
max-height: 100%;
}
http://jsfiddle.net/2nkVm/
Thanks a lot!
Try this:
img {
display:block;
position:absolute;
top:50%;
margin-top:"negative margin based on half of image height";
}
Updated your fiddle:
http://jsfiddle.net/2nkVm/3/
$(document).ready( function() {
positionImage();
$(window).resize( function() {
positionImage();
});
});
function positionImage() {
var wrapperHeightOffset = $('#wrapper').height() - $('#wrapper img').height();
var wrapperHeightOffset = wrapperHeightOffset/2;
$('#wrapper').css('paddingTop', wrapperHeightOffset + 'px');
}
What is the best way to make a div scroll along with the page?
The exact effect is utilized # http://store.apple.com/ (on the checkout summary after a product is added to the cart)
edit: or this example - alas, it's not as smooth as i'd like it to be =/
In the second example, they are using jQuery to do this. Scroll event of window object is caught and the using the animate() function the position of div is changed dynamically.
This tutorial should help you: http://css-tricks.com/scrollfollow-sidebar/
jQuery saves the day... again!
CSS:
#wrapper {
position: absolute;
width: 200px;
}
#fancyDiv {
position: absolute;
top: 0;
}
#fancyDivt.fixed {
position: fixed;
top: 0;
}
html:
<div id="commentWrapper">
<div id="comment">
<p>some text</p>
</div>
</div>
jQuery:
$(document).ready(function() {
$(function () {
var top = $('#fancyDiv').offset().top - parseFloat($('#fancyDiv').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the div
if (y >= top) {
// if so, ad the fixed class
$('#fancyDiv').addClass('fixed');
} else {
// otherwise remove it
$('#fancyDiv').removeClass('fixed');
}
});
}
});