So I want to be able to scroll through my page while hovering over a div (the header) with position: fixed;. Is there any (easy) way to do this?
I've found a similar question here, but in my case there are links (<a></a>) inside that div and those should work, so pointer-events: none; does not help in my case..
Thanks already!
This is my CSS for the header:
#header {
height: 90vh;
min-height: 80px;
max-height: 90vh;
background-color: rgb(30,30,30);
position: fixed;
top: 0;
left: 0;
box-shadow: 0 0 15px rgb(0,0,0);
z-index: 1;
}
Hi I think you need this:
#navcontainer
{
position:fixed;
background:red;
left:0;
right:0;
top:0;
height:100px;
z-index:3;
}
#navcontainer a{
float:left;
margin-right:10px;
}
.content
{
position:relative;
background:green;
left:0;
right:0;
padding:10px;
top:90px;
z-index:2;
}
.content .text
{
padding:10px;
background:yellow;
}
<div id="navcontainer">
Menu item 1
Menu item 2
Menu item 3
</div>
<div class="content">
<div class="text">
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
lorem ipsum<br/>
</div>
</div>
Related
Hello I have problem when I make header using html and css. I have my header in fixed position, but the content is covered up my header. I want my content position under header when I run it. One more, I set header width 100% but it shift to the right so it doesn't cover up whole width on the screen.
[UPDATED]
<style>
#media(min-width: 468px) {
body{
background-color: aqua;
}
.container-1{
display: flex;
/*
align-items: flex-start; -->box 1 lebih sempit ke atas
align-items: flex-end; -->box 1 lebih sempit ke bawah
align-items: center; -->box 1 lebih sempit ke tengah (atas bawah)
flex-direction: column; -->flex box menjadi kolom
*/
}
.container-2{
display: flex;
/*
justify-content: flex-end;
justify-content: flex-start;
*/
justify-content: space-between; /*ada spasi diantara kotak*/
}
}
.container-3{
display: flex;
flex-wrap: wrap;
}
.container-1 div, .container-2 div, .container-3 div{
border:1px #000000 solid;
padding:10px;
}
.box-1{
flex:2;
order:2;
}
.box-2{
flex:1;
order:1;
}
.box-3{
flex: 1;
order:3;
}
.container-2-box{
flex-basis:20%;
}
.container-3-box{
flex-basis: 10%;
}
header{
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
margin:0;
}
.whole-container{
margin-top:2.0rem;
}
</style>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Flexbox</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<header>
<h1> Flexbox</h1>
</header>
<div class="whole-container">
<div class="container-1">
<div class="box-1">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-2">
<div class="container-2-box">
<h3>Box 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-3">
<div class="container-3-box">
<h3>Box 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 10</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 12</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>
Without seeing your HTML code it is a bit guessing, but I'll give it a go.
Adding a position: fixed to an element will make it flow above the other content. The element is taken out of the document flow. So the overlapping is natural behavior.
To prevent the content to be hidden, you should add a padding to the parent of the boxes. I'm guessing that when you add the following code, it solves the problem
body {
padding-top: 3rem; /* should be at least the height of the header*/
}
The second question about the position of the header can be fixed by the following code:
/* option 1, add a left position:*/
header {
...
left: 0;
}
/* option 2, remove the width, use left and right position instead: */
header {
...
/* width: 100%; remove this line */
left: 0;
right: 0;
}
body {
margin: 0;
}
body {
margin: 0;
}
header {
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
/*not cover whole width*/
margin: 0;
}
.whole-container {
margin-top: 2.0rem;
}
<body>
<header>
0000
</header>
</body>
I'm trying to create a layout where the user will be able to scroll one service section at a time for ex if the user scrolls down from the first section i want the first section to fade out before the second section fades into the same place as the frist section was
here is a link to js bin Click [here] (https://jsbin.com/xubemivaso/edit?html,js,output)
#one, #two, #three, #four
{
padding: 0px;
margin: 0px;
height:100%;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
font-size:3rem;
right: 0px;
left: 0px;
background-color:black!important;
}
#one {
top:0px;
}
#two {
top:100%;
}
#three {
top:200%;
}
#four {
top:300%;
}
.container-outer{
overflow: hidden;
margin:0px;
padding:0px;
width:100%;
height:100%;
position:relative;
}
.container-inner{
overflow:auto;
position:fixed;
width:100%;
height:100%;
padding:30px;
border:30px solid #131313;
margin:0px;
padding:0px;
}
.container-inner::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body itemscope itemtype ="http://schema.org/LocalBusiness">
<div class="cursor"></div>
<div class="cursor"></div>
<div class="container-outer">
<div class="container-inner" id="fullpage">
<nav>
<a class="careers">CAREERS</a>
<a class="services">SERVICES</a>
<a class="about">ABOUT</a>
<a class="find-us">FIND US</a>
</nav>
<div class="slogan">
<h1>SERVICES</h1>
</div>
<div id="one" class="outer section">
<div class="service-inner first">
<p class="service-title-first"></p>
<p class="service-para-first">
Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor
</p>
</div>
</div>
<div id="two" class="outer section">
<div class="service-inner second">
<p class="service-title-second"></p>
<p class="service-para-second">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="three" class="outer section">
<div class="service-inner third">
<p class="service-title-third"></p>
<p class="service-para-third">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
<div id="four" class="outer section">
<div class="service-inner fourth">
<p class="service-title-fourth "></p>
<p class="service-para-fourth ">Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor Amet Lorem Ipsum Sit Dolor</p>
</div>
</div>
</div>
</div>
<script>
(function(container){
$.fn.stopAtTop= function (serv) {
var $this = this,
$container = $(".container-inner"),
thisPos = $this.offset().top,
//thisPreservedTop = $this.css("top"),
setPosition,
under,
over;
under = function(){
if ($(".container-inner").scrollTop() < thisPos) {
TweenMax.to($this, 0, {"position":"absolute","top":""});
setPosition = over;
}
};
over = function(){
if (!($(".container-inner").scrollTop() < thisPos) ){
TweenMax.to(serv.prev(".service-inner").find('.service-inner'), 1, {"opacity":"0"});
TweenMax.to($this, 0, {"position":"sticky","top":"0px"});
TweenMax.to(serv, 1, {"opacity":"1"});
setPosition = under;
}
};
setPosition = over;
$container.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$container.scroll(function(){setPosition();});
setPosition();
};
})($(".container-inner"));
$('#one').stopAtTop($("#one > .service-inner"));
$('#two').stopAtTop($("#two > .service-inner"));
$('#three').stopAtTop($("#three > .service-inner"));
$('#four').stopAtTop($("#four > .service-inner"));
</script>
I want to show a border effect when I'll scroll down and reach on the desired section.And it'll be hide when I'll leave that section. Is this possible using jquery?
Using $(document).on('scroll'), like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
html,body {
height:101%;
}
#box-1 {
width:200px;
height:200px;
background-color:#333;
}
.border-1 {
border: 10px solid #696969;
}
</style>
<body>
<h1 id="myTarget">This is the desire section</h1>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p>
<div id="box-1"></div>
<script>
$(document).on('scroll', function() {
var pos = $(this).scrollTop();
if( pos >= $('#myTarget').offset().top){
$("#box-1").addClass("border-1").show();
} else {
$("#box-1").removeClass("border-1").hide();
}
})
</script>
</body>
</html>
Im trying to make text flowing around the image, in a different scenario. the image wont be inside the content. Image would be a seperate component and the div with text will be a seperate component. So markup will look like this
<img class="imgtofloat" src="images/1.png" alt="" />
<div class="divwithcontent">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
The scenario is that we cant change the markup but we need to position the image between the content and make the content float around it.
EDIT 1:
I need the image to be in the center of the content as it is in this image https://www.flickr.com/photos/41695354#N08/14477076543/
We can stretch our CSS imagination. Hide the image and replace it with background.
Example, possibly adaptable.
Have a fiddle!
CSS
img {
display: none;
}
p:first-child:after {
content: "";
display: block;
float: left;
width: 100px;
height: 100px;
background: url(http://www.placehold.it/100) no-repeat;
margin: 20px;
}
If you can Change the image placement.
step 1) put image in between the paragraph text.
step 2) and one attribute in img tag align="left"
You can also use inline style, if you just have a few CSS rules.
<img src="images/1.png" alt="" style="float: left" />
I’m using jquery plugin jQuery custom content scroller
source :
http://manos.malihu.gr/jquery-custom-content-scroller/
It works very well in vertical mode.
I can call mCustomScrollbar and call the update method.
See this fiddle :
http://jsfiddle.net/Vinyl/2mU7H/1/
But in horizontal mode, i have an issue when i call the update method. There is no content.
See this fiddle :
http://jsfiddle.net/Vinyl/4CW3p/1/
Do you know why ?
JS Code :
$(document).ready(function () {
$("#content").mCustomScrollbar({
horizontalScroll: true,
scrollButtons: {
enable: true
},
theme: "dark"
});
});
$("#button").click(function () {
$("#content").show();
$("#content").mCustomScrollbar("update");
});
$("#button_close").click(function () {
$("#content").hide();
});
CSS code
#content {
display:none;
overflow:hidden;
text-align:left;
width:150px;
height:150px;
background-color: #666;
color:#fff;
}
HTML code
<div id="content">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<p id="button">Show Content</p>
<p id="button_close">Hide Content</p>
Fiddle
You forgot the autoExpandHorizontalScroll setting :)
$("#content").mCustomScrollbar({
horizontalScroll: true,
scrollButtons: {
enable: true
},
theme: "dark",
advanced: {
autoExpandHorizontalScroll: true
}
});