I have the following snippets in my code that help me achieve a fixed-top-navigation-on-scroll.
HTML:
<nav>
<button class="navbar-toggler navbar-static-top hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<img class="navbar-brand" src="pics/logonavigation.png"/>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link smoothScroll" href="#navigation">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link smoothScroll" href="#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
JAVASCRIPT:
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - $('nav').height();
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
$('.navbar-toggler').click(function() {
var newHeight = $('nav').height();
$(".fixed").height(newHeight);
});
});
</script>
CSS:
.fixed {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
z-index: 1;
height: 50px;
}
The entire file pastebin can be found HERE
I am using bootstrap v4
Viewing the site in mobile view the following is observed:
The collapsible portion of the navigation is left "bare" without the black background. What I would like is to get the effect below:
I cannot use the class "navbar" at because somehow it interferes with the fixed-top-navigation-on-scroll. How can I get the background of the collpasible portion of the navigation in mobile view to appear black? I tried adjusting the height of .fixed dynamically using jquery but it doesn't work.
It's better to put your code into something more universally used like JSfiddle or CodePen.
Since I don't have a Pastebin account and can't easily run the code, I'll take a guess. Based on what I can see here, because your nav is gaining the .fixed class with a fixed height: 50px;, you're not going to get the black background behind the menu because it's only 50px tall.
Try changing it to height: auto;, assuming height is 50px before it gains .fixed. I'd also add a transition: height Xs; on it because when height is set to auto, it will "grow" to cover the menu.
EDIT
One big issue here is that you've declared a top AND bottom value on .nav. This was causing the full height for the .fixed nav. So remove that.
Then change the second half of your jQuery to this:
$(function() {
$('.navbar-toggler').click(function() {
$('nav').css('height', 'auto');
});
})
So when .navbar-toggler is clicked, we add height: auto; to the nav.
This worked for me upon testing, as far as getting the navbar to expand to include the menu items without going full browser height.
I recognize that pulling bottom: 0 out from nav will cause placement issues relative to #screen1, but I don't understand why you put the nav inside that section anyway. I would put it between #section1 and #section2.
You could change the height for #section1 to be calc(100vh - 50px) so that the navbar fits perfectly at the bottom of the screen.
Related
I have tried to follow this solution to create a resizable side navigation bar: How can I resize a DIV by dragging just ONE side of it?.
I am able to create a resizable div, however, the div also resizes everytime I click to select a menu option. I only want the Sidenav to resize when dragged by a mouse.
One thing to note: Due to the tool I use to develop the site, I cannot use #id, so I have to use a class instead.
Here is the code:
var i = 0;
var dragging = false;
$('.sidenav-wrapper').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('.body')
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left", e.pageX + 2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$('.sidenav-wrapper').css("width", e.pageX + 2);
$('.main').css("left", e.pageX + 2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
.sidenav-wrapper
{
flex: 0 1 auto;
resize: horizontal;
cursor: e-resize;
overflow: auto;
width: 300px;
margin-left: 8.5%;
margin-top: 0px;
display: block;
background-color: #f7f7f7;
}
#ghostbar
{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999
}
<div class="sidenav-wrapper>
<div class=" sidenav-container ">
<ul class="menu">
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
</ul>
</div>
</div>
<div class="body">
<p> Some content here</p>
</div>
Thanks for the help!
In the example you linked, there is a dragbar element. You need to add that element to your HTML and perform the mousedown event on that element.
stop bubbling on the ul to the parent by prevent default. Each time you click, mouse down and mouse up are triggered on the parent element. so, just stop propagating the event at the child.
I mean to say, adding the following lines to the js should stop the sidebar to resize on clicking the ul element.
$("ul").on('click',fucntion (e) {
e.stopPropagation();
});
PS: i tried running your code on Codepen, it doesn't seem to work, can you add a codepen/jsbin live example which actually works.
What I'm trying to achieve is when a page is scrolled down the navigation is hidden - as in it disappears off the top of the screen like it traditionally would. When a user scrolls back up the page, the navigation slides into view again. Likewise, if you scroll down again, it's hidden.
I've tried a few different plugins for this and they nearly work. The one I'm currently looking at is "jquery-unveiled-navigation"
Link: https://github.com/weaintplastic/jquery-unveiled-navigation
Example: http://codepen.io/weaintplastic/full/RNpXOO/
This very nearly does what I want it to. It could do with some classes once the script is 'active'. As I only want to add a background-color when the script is 'active'. So it would be transparent until the navigation had left the screen and wasn't at the top.
Also, I know with this navigation if you scroll back up so half the navigation is in view, it will quickly adjust so you can see the bar in it's entirety. But I quite like the idea of it only showing as much as you've scrolled up by. So if the nav is 100px tall, and you scroll 30px, you only see the bottom 30px of the bar. Scrolling back down would hide the bar again, pixel by pixel - does that make sense?
So the steps would be (if this makes it clearer):
Header at the top of the page, transparent background.
When scrolling down, pixel by pixel the navigation leaves the screen.
When the user scrolls back up, the header starts to reveal it's self again - this time is has a background-color.
Once header hits the top of the browser again, the background is removed.
My markup is pretty simple. The bar only holds a logo and navigation toggle as the nav is hidden until the toggle is clicked, which displays the nav full screen.
<header class="page-head">
<span>Menu</span>
<nav class="site-nav">
<ul class="site-nav__list">
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
</ul>
</nav>
</header>
I've removed the SVG I have within page-head__home-link otherwise it would be a wall of code!
Hope someone can help :)
You can do this pretty easily without jquery or a library. You just need to watch the scroll event and when the direction changes place the header just above the field of vision and then as you continue to scroll make sure it never moves off of the top of the parent container.
var body, direction, margin, pageHead, pageHeadHeight, scrolled;
body = document.getElementById('tall');
scrolled = 0;
direction = null;
pageHead = document.getElementsByClassName('page-head')[0];
pageHeadHeight = pageHead.offsetHeight - 1;
margin = 0;
body.addEventListener("scroll", function(event) {
if (scrolled < body.scrollTop) {
direction = 'down';
} else {
if (direction === 'down') {
direction = 'up';
margin = Math.max(0, body.scrollTop - pageHeadHeight);
}
if (margin > body.scrollTop) {
margin = body.scrollTop;
}
pageHead.style['margin-top'] = margin + 'px';
}
return scrolled = body.scrollTop;
});
.tall {
background-color: blue;
min-height: 3000px;
min-width: 100%;
}
#tall {
max-height: 180px;
border: 3px solid pink;
overflow: auto;
}
.page-head{
color: white;
display: inline-block;
}
a {
color: white;
}
<div id="tall">
<div class='tall'>
<header class="page-head">
<span>Menu</span>
<nav class="site-nav">
<ul class="site-nav__list">
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
<li class="site-nav__item">Link</li>
</ul>
</nav>
</header>
</div>
</div>
Trying to implement my own social share icons. I've got everything working the way I'd like but I've run into a slight issue. I want to make the icons scroll alongside the content with the user so I use jQuery by doing this:
HTML
<div id='blogpost'>
<div id='social'>
<ul class='fa-ul'>
<li class='fb'><i class='fa fa-facebook'></i></li>
<li class='twitter'><i class='fa fa-twitter'></i></li>
<li class='google'><i class='fa fa-google'></i></li>
<li class='linkedin'><i class='fa fa-linkedin'></i></li>
</ul>
</div>
<h2>Lorem Ipsum</h2>
<p>My text...</p>
</div>
JS
$(document).ready(function(){
var stickyTop = $('#social').offset().top; //Get top of the social div
$(window).scroll(function(){ //Scroll event - executed each time user scrolls
var windowTop = $(window).scrollTop();
if(stickyTop < windowTop){
console.log('sticky');
$('#social').addClass('stick');
}else{
console.log('normal');
$('#social').removeClass('stick');
}
});
});
The #social div has following CSS which displays it slightly to the left of the blog post. This is perfect.
div#social {
position: absolute;
left: -80px;
top: 45px;
}
When I scroll I then add the .stick class to the #social and the position is updated from absolute to fixed. This is causing inconsistency on mobile devices. When I resize the screen sometimes the icons appear behind the post rather than just slightly to the left. Is there a way I can update my CSS to ensure the icons are always just slightly to the left ??
You can see my JSFiddle here: https://jsfiddle.net/c7jwtcfr/4/
Thank you.
To solve your problem, changing the left value in .stick is sufficient:
.stick{
left: 18px !important;
position: fixed !important;
top: 55px !important;
}
I have an issue I was hoping someone could kindly help me with. I'm currently building a webiste, and tried to use a jquery plugin for the first time to create a sticky navigation bar (http://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/).
When I assign an #ID to the nav tag, and change the CSS rule accordingly to apply just on this specific nav, the plugin stops working. The problem is that I would like to have a few navs on my page and I don't see another option.
Any suggestions?
Thanks!
And here is a link to the full code:
http://codepen.io/anon/pen/gbQBOo
HTML:
<section id="screen1">
<p>Scroll down</p>
<nav id="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
CSS:
/* Navigation Settings */
#main-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #fff;
}
JS:
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('#main-nav').addClass('fixed');
}
else {
$('#main-nav').removeClass('fixed');
}
});
});
In CSS, #main-nav is more precise than .fixed, so it takes precedence.
You could:
1) change .fixed into #main-nav.fixed
2) set the position from .fixed to fixed!important
3) not use an id but a specific class for your nav, and make sure .fixed is defined after that new class
I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <li> elements , so that they don't exceed one line.
The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .
The plugins that I've tried have not been useful to me .
My code looks like this:
<div class="row">
<div class="col-md-12 column">
<ul class="nav nav-pills center-pills text-center">
<li class="active">
<a href="#">
<span class="text-center badge pull-right span-list">1</span>
1 Mars
</a>
</li>
<li class="">2 Mars</li>
<li class="">3 Mars</li>
<li class="">4 Mars</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
</ul>
</div>
</div>
The code fiddle .
Your suggestions will be very welcome .
Are you having a problem with styling? If so...
I've set the row height to fixed, and made overflow hidden, so that you get just one row of buttons.
.row{overflow:hidden;height:42px;}
I've added a prev and next button, and made them float left and right respectively. I hope this doesn't violate your pagination framework. Please let me know if you want an example of how to programmatically add these elements.
HTML
<li class="next">Next</li>
<li class="prev">Previous</li>
CSS
li.next{float:right;}
li.prev{float:left;}
I believe this gives the desired result... please let me know if I've missed your intention.
Disclaimer: I've only tested this in Opera 19.0. I don't have access to Firefox/Chrome/IE at the moment.
Example: http://jsfiddle.net/nickg1/5ELfQ/2/
Updated: Updated to remove horizontal scrollbar. - http://jsfiddle.net/nickg1/5ELfQ/3/
I have had success with Bootstrap pagination. If you are generating too many elements to fit in your desired space, you need to either figure out a way to generate less or use css to limit the size of your pagination space and "cut off" the overflowing elements.
What you can do is .prepend() a left li and .append() a right li:
$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});
Although there has little browser compatibility and styling issues in this solution. But I hope this will give you an idea to start.
My CSS:
.nav.nav-pills {
width:auto;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
position: relative;
padding-right: 38px;
display: inline-block;
}
.nav-pills > li {
display: inline-block !important;
float: none !important;
}
.nav-pills > li.last {
position: absolute;
right: 0;
}
As display:inline; is applied to .nav, so for centering use text-center class in wrapping div. i.e.
<div class="col-md-12 column text-center">
Apply jQuery for previous/next buttons and resizing issues.
$(document).ready(function () {
$('.nav').prepend('<li>«</li>');
$('.nav').append('<li class="last">»</li>');
var ulWidth = $('.nav').width();
var screenWidth = document.body.clientWidth;
if (screenWidth < ulWidth ){
$('.nav').css('width', '100%');
}
$(window).resize(function(){
screenWidth = document.body.clientWidth;
screenWidth < ulWidth == true ?
$('.nav').css('width', '100%') :
$('.nav').css('width', 'auto');
});
});