I want to make a header div (like a banner) fixed only when the header is trying to go out of the screen as the user scrolls down. Is it possible to do without using JS? For an example in Facebook timeline, if we scroll down a banner floats up as soon as the page's header goes out of the screen. My question is, is it possible to do with only CSS?
In case it is not clear enough, I want to know whether a style "position: fixed" can be applied conditionally like when 80px of the page is scrolled.
Yes. You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.com is doing it.
Update [10/31/2013] - Techcrunch changed their UI recently so you cannot see this there anymore!
Check this demo: http://jsfiddle.net/WDnyb/2/
HTML
<div class="header">Header</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
Relevant CSS
.header {
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
position: relative;
height: 100px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
margin-top: 100px;
}
This can now be done properly and without javascript with position: sticky.
Refer to https://css-tricks.com/position-sticky-2/ for examples.
warning: At the moment of writing, it is not supported on IE11, opera mini, and android's stock browser: https://caniuse.com/#feat=css-sticky
It is not possible using css. You can do using JavaScript or jQuery. Because it need some conditions.
Html----included my content within
<header1>
..............
</header1>
JS
<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 200));
});
});
</script>
i have used above script to make a header fixed,its working fine in googlechrome not in firefox.....
Related
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
How can I make the icon::before pseudo element not scroll. I want it to have a "fixed" position; not relative to the window, but to div.scrollable.icon
Here's the demo I'm talking about: http://codepen.io/anon/pen/VLWdEm
===UPDATE===
There's a problem here. Here's the new codepen: http://codepen.io/kiranm/pen/QbgxZV
How do I make icon::before "fixed" relative to div.scrollable.icon?
Ok, I understood your problem. Since we all tried the code with the preview expanded we didn't see that when we shrink the preview the div was fixed relative to the window.
So I came up with this, although I couldn't do it just with CSS, I had to add a little of jQuery and modify your HTML structure.
HTML
<div class="scrollable">
<div class="icon"></div>
text
</div>
CSS
.scrollable {
border: 1px solid tomato;
width: 200px;
height: 200px;
overflow: auto;
position: absolute;
}
.icon {
position: relative;
}
.icon::before {
content: 'An icon';
background-color: yellow;
padding: 2em;
}
And the jQuery
var $ = jQuery || $;
$(document).ready(function() {
$('.scrollable').on('scroll', function() {
var top = $('.scrollable').scrollTop() + $('.scrollable').offset().top;
$('.icon').css({'top': top + 'px'});
});
});
As you can see I added another CSS rule so I can manipulate it with jQuery, and with jQuery I took the value of the scroll in the container div and I add to it its value to the top of the window, and I assign that result to the top of the icon so it will be "fixed" to the div. Also I moved the icon div to be a child of scrollable so I can manipulate it separately.
Here's the pen http://codepen.io/anon/pen/QbgxzV
I hope it helps you.
Try like this: Demo
.icon::before {
content: 'An icon';
background-color: yellow;
padding: 2em;
position: fixed; / * changed position absolute to fixed */
}
I cant understand your requirement?
Position fixed is working for relative to window screen only. otherwise you set icon position:relative then give icon::before position absolute.
I would like to ask you guys if how can I create a floating window in code igniter. The scenario is when I clicked a textbox it would show a floating window with a close button on the upper right corner. I'm new in using code igniter. Thank you for the ones that would give me solution.
If I am correct, Code igniter is a PHP framework. What you usually build a modal pop up window with is javascript and CSS. The following code should be pretty readable. the fadeIn(); methods come with jQuery out of the box - and a tricky way of absolutely positioning the box requires a width and height. Here is a jsFiddle
HTML
<div class="box">
This is your box
<button id="close">close</button>
</div>
<button id="open">open</button>
CSS
.box {
position: absolute;
width: 400px;
height: 200px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: 1px solid red;
display: none;
}
jQuery
$('#open').on('click', function() {
$('.box').fadeIn();
$(this).hide();
});
$('#close').on('click', function() {
$('.box').fadeOut();
$('#open').show();
});
I have a web app with multiple canvases displayed on a single page. This makes the page very long and a lot of scrolling is necessary from the client.
To enhance user accessibility I have added a footer class:
HTML:
<footer class="site-footer">
<a href="#" style="text-align:inherit; position: relative;
vertical-align: inherit; left: 399px; width: 146px;"
data-scroll="claims">TOP OF THE PAGE</a>
</footer>
CSS:
.site-footer, .page-wrap:after
{
height: 52px;
}
.site-footer
{
background: orange;
border:2px solid white;
}
This allows the user to directly jump up to the top of the page once they have scrolled to the very bottom of the page.
I was wondering if there was a way to make this footer available at all views of the page, and not just only at the very bottom. That way the client may choose to scroll to the very top of the page from only the middle of the page and not the very bottom.
I have tried playing around with the CSS property position, but to no avail. Can anyone help?
Also further suggestions on how to make my user experience cooler is very much appreciated.
Thanks.
Check out Smooth Page Scroll to Top with jQuery for an example of this type of effect.
Here is a demo.
Here is the code for that:
CSS:
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}
HTML:
Scroll
...
Bunch of content here, big enough to make the page scroll in order to read it all.
...
JavaScript/jQuery:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
}
else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
Used fixed positioning:
.site-footer {
position: fixed;
bottom: 0;
left: 0;
}
position: fixed means the element will be removed from the normal document flow and positioned relative to the viewport (browser window).
The code above will force your .site-footer element to always be visible at the bottom left of the screen (use right: 0 instead if you'd like it on the right side). Some additional code may be required, but it's not possible to tell that from what you have provided.
I'm going to guess the answer to this question will be "no," but it would be so nice, I'm going to ask anyways.
What I'm trying to do is freeze an element inside a scrollable DIV such that it stays in place vertically. This is to implement a frozen row feature in a table.
It's pretty easy to do with JavaScript and absolute positioning. Here's the HTML for a container and three inner DIVs (see here for the live version):
<div id="container">
<div id="background">
Content
</div>
<div id="absolutediv">
Absolute stays inside
</div>
<div id="fixeddiv">
Fixed escapes!
</div>
<div id="absolutediv2">
Stays put!
</div>
</div>
The relevant CSS:
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#absolutediv {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
#fixeddiv {
position: fixed;
top: 100px;
width: 300px;
background-color: #ECC;
}
#absolutediv2 {
position: absolute;
width: 300px;
top: 120px;
background-color: #ECC;
}
And JavaScript that will hold #absolutediv2 in place:
var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');
container.addEventListener('scroll', function() {
div.style.top = container.scrollTop + 120 + 'px';
});
So #absolutediv2 is behaving the way I want. But look at #fixeddiv. This gets close to what I'm after, and I suspect it looks nicer on mobile devices because the browser can hold it in place without waiting to run the script. Except that it (a) runs right over the borders, and (b) doesn't scroll horizontally.
Is there any way to get what I'm after with pure CSS, something that would run well on a mobile browser?
(In my page, one way to do this would be to place the frozen row above the container DIV, but the number of frozen rows changes depending on where the user has scrolled to, meaning that the container DIV would have to move around.)
Edit:
To sum up, I want a div that:
Scrolls horizontally with its container
Stays put when its container scrolls vertically
Looks like it belongs to its container
Looks nice on a mobile browser
The last one is the tricky bit. I can achieve #1, #2, and #3 with an absolute-position div and JavaScript, but it looks ugly on a mobile browser because it lags. Using a fixed-position div, I can get #2 and #4, and I can achieve #1 with JavaScript (the lag doesn't bother me so much horizontally), but not #3, because a fixed-position div suddenly sits on top of its container.
Google has a suggestion for this kind of thing, but it's a pretty extreme solution: https://developers.google.com/mobile/articles/webapp_fixed_ui
Ok, I haven't tested this but it should be along the right track. Basically this gives you the ability to create multiple "Sticker" items with the HTML5 data attribute I created for you data-special="sticker". The jQuery looks for these, then copies the data and appends it to another <div> element that is positioned where the original was, then it hides the original.
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#original-element {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
.sticker {
position:absolute;
}
<div id="wrapper">
<div id="container">
<div id="background">
Content
</div>
<div id="original-element" data-special="sticker">
I want to stay put!
</div>
</div>
</div>
$("[data-special='sticker']").each(function () {
$('#wrapper').append(
$('<div/>').html($(this).html())
.addClass("sticker")
.css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
.css('left', $('#container').css('left'))
.css('width', $('#container').css('width'))
.css('background-color', $(this).css('background-color'))
);
$(this).css('display', "none");
});
Let me know how it works for you, also one downside to this is once the original element is hidden, the space it used to take up is then collapsed... I'll try to brainstorm a solution for that.
Edit:
Changed the JS to get the #container width instead of the original element width as the original element is larger that the container.
Edit:
Tested: jsfiddle
Some issues would be that the element will then also overlap the scroll bar, if you knew the width of that you could then subtract if from the value.
Also check the updated code above. There were some errors...
You might want to have a look at the following post:
How can I make a div stick to the top of the screen once it's been scrolled to?
As explained in this answer:
A script-free alternative is position: sticky, which is
supported in Chrome, Firefox, and Safari. See the article on
HTML5Rocks
and demo, and
Mozilla
docs.
As of today, the demo linked works for me in Firefox but not in Chrome.