This is my css
<style type="text/css" media="screen">
body {
margin: 0;
}
#wrap1{
width:600px;
margin:0 auto;
overflow:hidden;
-moz-box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
}
#body1{
width: 8000px;
}
.panel {
width: 600px;
float: left;
left:0px;
top:0px;
margin-top: 45px;
background: #eee;
}
#banner {
position: fixed;
}
#banner ul {
line-height: 45px;
margin: 0 30px;
padding: 0;
}
#banner ul li {
display: inline;
margin-right: 30px;
}
</style>
This is what I have in my body
<div id="wrap1">
<div id="body1">
<div id="banner">
<ul>
<li>
Home
</li>
<li>
Newsletter
</li>
<li>
Directions & Opening Hours
</li>
<li>
Contact us
</li>
</ul>
</div>
<div id="home" class="panel">
<h2>
Home
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="newsletter" class="panel">
<h2>
Newsletter
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="directions" class="panel">
<h2>
Directions
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="contact" class="panel">
<h2>
Contact
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
and this is the javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#banner a").bind("click",function(event){
event.preventDefault();
var target = $($(this).attr("href"));
$("html, #wrap1").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
</script>
I want to have something like this. So, when I clicked the navigation contact, the page inside the wrap1 will scroll smoothly to the where the anchor #contact is
However, what i get right now is the smooth scroll is working fine, however, it doesn't seem stop at where it is supposed to stop. For instance, when I click Newsletter link, the scroll will stop in the half part of Newsletter. So when click Newsletter link, it will show me half part of Newsletter and half part of Directions.
Please jQuery guru out there help me fix this issue. This has been bugging me for days.
Thanks and sorry for the lack of jQuery knowledge I have.
*EDITED:
This is my page looks like right now. Please help
http://testhscroll.tumblr.com/
Your problem is that offset() returns values relative to the document, whereas scrollLeft will be relative to the parent.
You need to adjust by the position of the parent (div#banner or the UL).
Related
I have two boxes, Now When the user clicks on LeftToRight then I have to slide content from left to right with LeftToRight box. if the user clicks on RightToLeft the I have to slide the div from right to left.
I tried below code but it's not displaying properly when clicking on the button. I want like a drawer.
Can anyone help me out with this issue?
$(document).ready(function() {
$("#clickLeft").click(function() {
$(".leftoRightbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidesecondbox")) {
$('.innerWrapper').addClass('hidesecondbox');
} else {
$('.innerWrapper').removeClass('hidesecondbox');
}
});
$("#clickRight").click(function() {
$(".righttoLeftbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidefirstbox")) {
$('.innerWrapper').addClass('hidefirstbox');
} else {
$('.innerWrapper').removeClass('hidefirstbox');
}
});
});
.innerWrapper {
text-align: center;
display: flex;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: #f8f8f8;
border: 1px solid #ccc;
}
.displayflex {
display: flex;
overflow: hidden;
}
.leftoRightbox,
.righttoLeftbox,
.goback,
.hidefirstbox .one,
.hidesecondbox .two {
display: none;
}
.leftoRightbox,
.righttoLeftbox {
height: 400px;
}
<div class="mainWrapper">
<div class="innerWrapper">
<div class="displayflex one">
<div class="leftoRightbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="leftoRight box" id="clickLeft">
<h2>This is slide left to right</h2>
<p class="goback">Go Back</p>
</div>
</div>
<div class="displayflex two">
<div class="righttoLeft box" id="clickRight">
<h2>This is slide right to left</h2>
<p class="goback">Go Back</p>
</div>
<div class="righttoLeftbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Add flex-shrink:0; to box element and define a fixed width for the p element to avoid the bad effect when doing the animation:
$(document).ready(function() {
$("#clickLeft").click(function() {
$(".leftoRightbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidesecondbox")) {
$('.innerWrapper').addClass('hidesecondbox');
} else {
$('.innerWrapper').removeClass('hidesecondbox');
}
});
$("#clickRight").click(function() {
$(".righttoLeftbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidefirstbox")) {
$('.innerWrapper').addClass('hidefirstbox');
} else {
$('.innerWrapper').removeClass('hidefirstbox');
}
});
});
.innerWrapper {
text-align: center;
display: flex;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: #f8f8f8;
border: 1px solid #ccc;
flex-shrink:0;
}
.displayflex {
display: flex;
overflow: hidden;
}
.leftoRightbox,
.righttoLeftbox,
.goback,
.hidefirstbox .one,
.hidesecondbox .two {
display: none;
}
.leftoRightbox p,
.righttoLeftbox p{
width:calc(100vw - 280px);
}
<div class="mainWrapper">
<div class="innerWrapper">
<div class="displayflex one">
<div class="leftoRightbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="leftoRight box" id="clickLeft">
<h2>This is slide left to right</h2>
<p class="goback">Go Back</p>
</div>
</div>
<div class="displayflex two">
<div class="righttoLeft box" id="clickRight">
<h2>This is slide right to left</h2>
<p class="goback">Go Back</p>
</div>
<div class="righttoLeftbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Hello good people of stack overflow. Please kindly help me look into this issue I have with a CSS sticky property applied to a div not retaining its parents' properties when scrolled on. The situation is like this:
I have a bootstrap navigator wrapped in a col div which is also wrapped in a row div I have applied the sticky property to the row div and used javascript to apply the sticky behavior (as fixed) on scroll to but when the window scrolls to that row, it retains all the elements in the row div and their properties but never the properties of the row div itself which is supposed to render a concrete beauty. Please kindly help look into this. Thanks.
window.onscroll = function() {
stickNav()
};
var nav = document.getElementById("navtwksamp");
var sticky = nav.offsetTop;
function stickNav() {
if (window.pageYOffset > sticky) {
nav.classList.add("sticky");
} else {
nav.classList.remove("sticky");
}
}
.sticky {
position: fixed;
width: 100%;
top: 0;
z-index: 2;
}
<div class="row" id="navtwksamp">
<div class="col-12">
<nav class="">
<div class="">
<div style="">...</div>
<div class="">...</div>
</div>
<nav class=""> ... </nav>
</nav>
</div>
</div>
I don't yet have enough reputation to attach an image of exactly what I mean but here are links if accessible. Thanks again.
.parent {
height : 200vh;
}
.child {
color: red;
background: yellow;
position: sticky; /* important */
top: 0;
}
<div class="parent">
<div class="child">Header</div>
</div>
You can use position: sticky;
please refer,
https://www.w3schools.com/howto/howto_css_sticky_element.asp
.sticky {
position: sticky;
width: 100%;
top: 0;
z-index: 2;
}
You missing content above and below the div class named with row therefore you have no height to scroll and you thinking its not working. just see below code i have reused your code and its working absolutely fine.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.sticky {
position: fixed;
width: 100%;
top: 0;
z-index: 2;
}
</style>
</head>
<body>
<div class="container-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullam</p>
<div class="row" id="navtwksamp">
<div class="col-12">
<nav class="">
<div class="">
<div style="">Home</div>
<div class="">About</div>
</div>
<nav class=""> Contact </nav>
</nav>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
window.onscroll = function() {
stickNav()
};
var nav = document.getElementById("navtwksamp");
var sticky = nav.offsetTop;
function stickNav() {
if (window.pageYOffset > sticky) {
nav.classList.add("sticky");
} else {
nav.classList.remove("sticky");
}
}
</script>
</body>
</html>
I have a problem that still could not solve any questions already made in Stack.
I have a Sticky header that makes a jump when I move and I can not find a solution. That is, I do a little scrolling and I jump around 100px (to say an example).
My idea is that the movement is totally fluid without any strange leap.
Keep in mind that the button "categories" on clicking shows several things, and do not intend that the solution superimpose other elements below (as a response from a user who proposes to wrap the entire header in a div and add a height as the from the header)
I leave a snippet for you to see what happens:
/*=============================================
HEADER
=============================================*/
$("#btnCategorias").click(function(){
if(window.matchMedia("(max-width:767px)").matches){
$("#btnCategorias").after($("#categorias").slideToggle("fast"));
}else{
$("#encabezado").after($("#categorias").slideToggle("fast"));
}
})
/*=============================================
HEADER FIJO
=============================================*/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
/*=============================================
TOP
=============================================*/
#top ul{
padding-top:8px;
}
#top ul li{
display:inline;
line-height:30px;
margin:0px 5px;
color:white;
}
.registro ul{
text-align: left;
font-size:16px;
}
/*=============================================
HEADER
=============================================*/
header {
background-color: #FFFFFF;
z-index: 1000;
}
header #btnCategorias{
margin:20px 0;
cursor: pointer;
}
header #btnCategorias p{
line-height:46px;
margin-bottom:0px;
font-size: 20px;
}
header #categorias{
display:none;
margin-top:-10px;
position: relative;
padding-bottom:20px;
}
header #categorias h4{
margin-top:20px;
margin-bottom:-10px;
}
header #categorias hr{
border:1px solid rgba(255,255,255,.3);
}
/*=============================================
STICKY HEADER
=============================================*/
.sticky {
-webkit-box-shadow: 0 6px 6px -6px #222;
-moz-box-shadow: 0 6px 6px -6px #222;
box-shadow: 0 6px 6px -6px #222;
position: fixed;
top: 0px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--=====================================
TOP
======================================-->
<div class="container-fluid barraSuperior" id="top">
<div class="container">
<div class="row">
<!--=====================================
REGISTRO
======================================-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 registro">
<ul>
<li>Ingresar</li>
<li>|</li>
<li>Crear una cuenta</li>
</ul>
</div>
</div>
</div>
</div>
<header class="container-fluid" id="myHeader">
<div class="container">
<div class="row" id="encabezado">
<!--=====================================
BLOQUE CATEGORÍAS Y BUSCADOR
======================================-->
<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
<!--=====================================
BOTÓN CATEGORÍAS
======================================-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 backColor" id="btnCategorias">
<p>CATEGORÍAS
<span class="pull-right">
<i class="fa fa-bars" aria-hidden="true"></i>
</span>
</p>
</div>
<!--=====================================
CATEGORÍAS
======================================-->
<div class="col-xs-12 backColor" id="categorias">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<h4>
Lorem Ipsum
</h4>
<hr>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
</div>
</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
You just needed to change the #btnCategorias whitespace from margin to paddingso that the white space around the element is considered as part of the element.
/*=============================================
HEADER
=============================================*/
$("#btnCategorias").click(function(){
if(window.matchMedia("(max-width:767px)").matches){
$("#btnCategorias").after($("#categorias").slideToggle("fast"));
}else{
$("#encabezado").after($("#categorias").slideToggle("fast"));
}
})
/*=============================================
HEADER FIJO
=============================================*/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
/*=============================================
HEADER
=============================================*/
header {
background-color: #FFFFFF;
z-index: 1000;
}
header #btnCategorias{
padding:20px 0;
cursor: pointer;
}
header #btnCategorias p{
line-height:46px;
margin-bottom:0px;
font-size: 20px;
}
header #categorias{
display:none;
margin-top:-10px;
position: relative;
padding-bottom:20px;
}
header #categorias h4{
margin-top:20px;
margin-bottom:-10px;
}
header #categorias hr{
border:1px solid rgba(255,255,255,.3);
}
/*=============================================
STICKY HEADER
=============================================*/
.sticky {
-webkit-box-shadow: 0 6px 6px -6px #222;
-moz-box-shadow: 0 6px 6px -6px #222;
box-shadow: 0 6px 6px -6px #222;
position: fixed;
top: 0px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
<header class="container-fluid" id="myHeader">
<div class="container">
<div class="row" id="encabezado">
<!--=====================================
CATEGORIES BUTTON
======================================-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 backColor" id="btnCategorias">
<p><strong>CATEGORÍAS
<span class="pull-right">
<i class="fa fa-bars" aria-hidden="true"></i>
</span>
</strong>
</p>
</div>
<!--=====================================
CATEGORIES
======================================-->
<div class="col-xs-12 backColor" id="categorias">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
<h4>
Lorem Ipsum
</h4>
<hr>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
</div>
</header>
<div id="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
Im working on a menu that is located on the left side of the screen, and with a button that is located on the main content area i hide/show the menu.
When the screen width is less than 768px i hide the menu using css, the problem that im having is that because the menu is already hided, when the user clicks on the button instead of showing the menu it is trying to hide the menu again.
Im having a lot of troubles trying to explain the problem,
Here is the live demo, with all the code of what I have.
The code works fine for desktop, the problem is when the screen is less that 768px.
This is the function tham using to show/hide the menu and to move the content
$('#menu-toggle').click(function(e)
{
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
CSS
.show-hide
{
margin-left: -250px;
}
Full Code Live Demo: https://jsfiddle.net/c7cpLq9m/
Just added this to the media query:
#wrapper .show-hide {
margin-left: 0;
}
$('#menu-toggle, .mobile-trigger').click(function(e) {
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
.container-fluid {}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mobile-trigger{
display: none;
}
#sidebar {
z-index: 1000;
position: fixed;
height: 100%;
width: 250px;
overflow-y: auto;
background: #1b1e24;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-hide {
margin-left: -250px;
}
ul.sidebar-nav {
list-style: none;
padding: 0;
}
ul.sidebar-nav li a {
display: block;
padding: 10px 25px;
color: #8b91a0;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1em;
}
ul.sidebar-nav li span {
padding-right: 10px;
}
ul.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
#page-content {
transition: 0.5s;
/* position: absolute; */
padding-left: 255px;
/* width:100%;
background: grey;*/
}
#media ( max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#wrapper .show-hide{
margin-left: 0;
}
.mobile-trigger{
display: block;
}
#page-content {
padding-left: 0px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<div id="sidebar">
<ul class="sidebar-nav">
<li><a class='mobile-trigger' href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Hide mobile menu</a></li>
<li class="sidebar-brand"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-user"></span> Contacts</li>
<li><span class="glyphicon glyphicon-picture"></span> Content</li>
<li><span class="glyphicon glyphicon-inbox"></span> Inbound</li>
<li><span class="glyphicon glyphicon-envelope"></span> Outbound</li>
<li><span class="glyphicon glyphicon-globe"></span> Social</li>
<li><span class="glyphicon glyphicon-folder-close"></span> Automation</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Reports</li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</li>
<li><span class="glyphicon glyphicon-comment"></span> Feedback</li>
</ul>
</div>
<div id="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Toggle Menu
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-6">
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ./wrapper -->
Update:
On mobile is better if you not push the content because it will look very messy. It's better to have the menu over the content and add a button inside the menu to close it. For this I added an extra element inside the menu, added the class mobile-trigger, I've hidden it by default on desktop and showed it on mobile using display: block;. Also added the selector mobile-trigger to the click event.
In lonut's answer its better adding this styles:
#menu-toggle {
position: absolute;
top: 0;
right: 10px;
}
To bring the toggle menu button top right of page.
Im trying to make a Webpage with a banner so that when you scroll the content comes from the bottom and keeps sticking right under the upper half of the banner.
I immediately came up with the easy and ugly idea, that the content-box would have the size of the screen, a big margin-top and overflow-y: scrolling, but as I said...it would be the ugly way.
Thus my main problem is to achieve this and still have one single scroll-bar. I think the header has to be position: fixed...has anyone an css / more mobile friendly idea?
EDIT:
As requested a JSFiddle to play with: http://jsfiddle.net/r2gbyjcs/
Before we begin
Note that there is no such thing as "fancy" or "unfancy" in coding. In fact, if I were to define "fancy", I'd describe it as "unnecessary." Because if all you want is to achieve the same result but put in a rube goldberg amount of effort, that's just wasting your time. Your goal is to create the fastest and smoothest implementation, not put fancy code behind the veil.
Solution
The solution is to divide the header into 2 divs: Top and Bottom. Make them have same background to be indistinguishable, but make the top have z-index: 0 while the bottom has z-index: -1. Then, split the height between the top and bottom and then adjust the margin-top of the content.
HTML:
<header>
<div id="top">Hotel</div>
<div id="bottom">Bottom half</div>
</header>
<div id="content">
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CSS:
body {
margin: 0px;
}
header #top{
height: 100px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
}
#content {
background-color: #e0ecf3;
padding: 20px;
margin-top: 200px;
}
header #bottom{
height: 200px;
background-color: #fb3f26;
position: fixed;
z-index: -1;
top: 0px;
left:0px;
right: 0px;
}
JSFiddle Demonstration
You could make the header position:absolute so it is fixed in place and taken out of the layout flow. Then add padding-top to the content box to compensate for the height of the header.
I would suggest something like this, but it's not the fanciest way:
HTML
<header id="header1">
<div>Hotel</div>
</header>
<header id="header2">
</header>
<div id="content">
...
CSS
#header1 {
height: 25px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
z-index: 1;
}
#header2 {
height: 300px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
z-index: -1;
min-height: 25px;
}
I think an easy way would be to just use position:fixed for the header/banner. Then edit the z-index so the banner is behind the content box and the header is above the content box. You can use margin-top to offset the height of the header/banner.
http://jsfiddle.net/haydensmack/r2gbyjcs/6/