i currently have a div that appears fixed after scrolling. i want that div to to remain visible but not fixed once the user reaches the bottom of the page..
this is what i have so far:
var topOfOthDiv = 800; //set manually for example
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#ctawrapper.ctaFloat").addClass('show'); //reached the desired point -- show div
} else {
$("#ctawrapper.ctaFloat").removeClass('show'); //reached the desired point -- hide div
}
});
#ctawrapper.ctaFloat {
position: fixed;
bottom: 0;
height: auto;
max-height: 100px;
width: 90%;
display: none;
}
#ctawrapper.show {
background: #fff;
width: 100%;
z-index: 999;
left: 0px;
padding: 15px;
border: 1px solid #ddd;
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctawrapper" class="clearfix ctaFloat">
<h4>sponsored topics</h4>
</div>
everything i have tried to do to add a new class or change the css once it reaches the footer have failed. can i get some help please?
Related
I am trying to align a button at the bottom of a div that shows when the user scrolls down 600px.
I cannot get the button to align where I want it, as when i use margin-top, when the screensize changes, the button position changes, as I am using % because I want it to be responsive.
Here is the button code and the div code.
Button and div
<div class="topMenu"><button type="button" class="btn btn-sky btn-lg btn-float">Get Started</button></div>
.topMenu {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 14%;
border-top: 1px solid #000;
background: #337AB7;
z-index: 1;
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 600) {
$('.topMenu').fadeIn();
} else {
$('.topMenu').fadeOut();
}
});
Thanks for any help.
First, take the link out of the button element. It's not valid HTML.
Next, you need to make your parent div's position relative and your button's position absolute. Give your button a bottom and left value and you should be good.
.topMenu {
position: relative;
width: 100%;
height: 1000px;
border-top: 1px solid #000;
background: #337AB7;
z-index: 1;
}
button {
position: absolute;
bottom: 0;
left: 50%;
display: none;
}
I want to make navbar with fixed position. At the top of the page the navbar should be under the header and after scrolling down when header is no longer visible the navbar should be at the top of the page. How can I do that? When I try to do it after scrolling down between the navbar and top of the page is still the height of the header(even though it is no longer visible).
Here is my css:
header{
background-color: red;
width: 100%;
height: 100px;
}
nav{
position: fixed;
float:left;
height: 100px;
width: 100px;
margin-left: 10px;
margin-right: 50px;
margin-top:50px;
background-color: green;
}
main{
background-color: blue;
height: 1500px;
margin-left:15%;
margin-right:5%;
margin-top:50px;
}
and jfiddle: https://jsfiddle.net/pg2kwk5e/
You can add a class to the nav element with javascript after scrolling a certain amount.
I've used Jquery as it's faster and easier to show this in action.
Example
I'm just adding a class .fixedTop to the nav after the window scrolls more than 150 pixels, the class itself just has top:0;margin0; to move the absolute positioned element to the top and remove the margin which was set before.
Code:
var $nav = $("nav"),
$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$nav.addClass('fixedTop');
} else {
$nav.removeClass('fixedTop');
}
})
CSS:
.fixedTop {
top: 0;
margin: 0 !important;
}
I currently have a div (#sticky) within the right bar of my page and would like to fix it to the top of the page once I scroll to it. The div (#sticky) I want fixed to the top of the page sits about 1000px down the page.
HTML:
<div id="right-bar">
<div id="sticky-anchor"></div>
<div id="sticky"></div>
</div>
CSS:
#right-bar {
display: inline-block;
float: left;
width: 336px;
height: 10000px;
margin-left: 15px;
}
#sticky {
display: block;
width: 334px;
height: 600px;
background-color: white;
border: 1px solid #e5e5e5;
margin-top: 15px;
}
#sticky .stick {
position: fixed;
top: 0;
z-index: 10000;
}
JAVASCRIPT: (within head tags)
<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
Not quite sure what I am doing wrong, but once I scroll to the div, I bypass it without it getting stuck to the top of the page.
Any and all help is appreciated!
You have a CSS typo, instead of #sticky .stick use #sticky.stick (same thing but without a space).
<div id="first">Something</div>
<div id="last">something too</div>
<style>
#last {
position: absolute;
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
}
#first {
}
</style>
My problem is that I can't reach last div with the border of the first div. I want last div to be at bottom and first div to have overflow:auto;? But it doesn't work. When I fill my div some text nothing is showing no scrollbar or anything like that and the first div kind of goes behind the last div even though I haven't assigned them any z-index values.
How Can I solve this? I want my first div to grow until it reaches last div and fill it with text maybe with scrolling appearing when it is only needed. I mean when two divs touch each other kind of.
This will give you a fixed size footer (#last) but the content (#first) expands as needed:
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: absolute;
top: 0;
bottom: 200px;
left: 0;
right: 0;
}
#first {
background-color: #5588FF;
width: 100%;
max-height: 100%;
overflow-y: auto;
}
#last {
background-color: #FF8855;
position: fixed;
bottom: 0px;
height: 200px;
width: 100%;
}
See this fiddle for the full solution: http://jsfiddle.net/xWa9f/4/
Is this what you want? Fiddle link: http://jsfiddle.net/emw2x/2/
body, html{
height: 100%;
}
#last {
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
border: 1px solid black;
width: 100%;
height: 10%;
}
#first {
border: 1px solid red;
height: 90%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
}
Give that a try to see if that's what you want.
if you accept some javascript in the mix, i have this solution for you.
first, change the absolute positioning to fixed positioning of the #last div.
set overflow:auto to the #first div and the javascript does the rest (you need jQuery):
(function () {
var heights = window.innerHeight;
var outerHeights = $("#last").outerHeight(true);
jQuery('#first').css('height', (heights - outerHeights) + "px");
})();
basically it calculates the window height of your monitor, it subtracts the height of the #last div and gives what's left to the #first div. when the content exceeds the available pixel height, a scroll bar will appear.
check it here: http://jsfiddle.net/vlrprbttst/rR7Uu/2/
the plus here is this works at any window resolution, so you don't have to worry about screen resolutions and you don't have to worry about the height of your #last div (margins, paddings, borders, whatever included)
I've just wrote a page with couple div-s and little CSS and javascript.
I don't know how to insert scroll bar into one of my div.
Code is not that hard to understand. CSS and javascript are included in code.
<html>
<head>
<style>
#container
{
vertical-align: top;
width: 98%;
height: 90%;
padding: 5px;
}
#discussion {
width: 99%;
height: 90%;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 5px;
text-align: left;
/*position: absolute; bottom: 0; left: 0;*/
position: relative;
}
#content
{
overflow-y: auto;
position: absolute; bottom: 0; left: 0;
}
#message {
width: 100%;
vertical-align:bottom;
padding: 5px;
border: 1px solid #ccc;
}
</style>
<script>
function init(){
var message = $('#message');
var content = $('#content');
message.keypress(function (e) {
if (e.keyCode == 13 && message.val().length > 0) {
content.append(message.val() + "<br/>");
//content.scrollTop(discussion.get(0).scrollHeight); //works fine with top to down
message.val('').focus();
}
});
};
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body onload="javascript:init();">
<div id="container">
<div id="discussion">
<div id="content"></div>
</div>
<input id="message" type="text" placeholder="Hit Enter button to insert"/>
</div>
</body>
</html>
I need scroll bar when content gets out of discussion section.
Thing is when I insert some text with from top to bottom flow scroll bar works fine.
Unfortunately, all text has to be inserted from bottom to top flow.
---------------
-
-
-
-
- first text
---------------
---------------
-
-
-
- first text
- second text
---------------
---------------
- second text
- third text
- fourth text
- fifth text
- sixth text
--------------- now I need a scroll bar to see first text.
You set the height to 90%, but it doesn't know what it's 90% of.
If you want it set to 90% of the body, you'll need to set html,body {height: 100%;}.
Then you need to remove the absolute positioning you put on the content.
Working fiddle here: http://jsfiddle.net/davidpauljunior/2PpqN/
The main cause for the problem is you missed to set the width and height for #content div.
So add it
width: 100%;
height: 100%;
Also for the parent element discussion, instead of using % value stick to static values for height so that user can view it. Currently it is very small to view the scroll.
width: 100%;
height: 200px;
JSFiddle
Hope you understand.
You need to remove overflow from #discussion and change postion to relative in #content
CSS
#discussion {
width: 99%;
height: 90%;
border: 1px solid #ccc;
padding: 5px;
text-align: left;
/*position: absolute; bottom: 0; left: 0;*/
position: relative;
}
#content
{
overflow: auto;
position: relative;
height:100px;
width:100%;
}
updated fiddle