I need to hide the div when the window scroll position is greater than the bottom position of the div. I tried to do it myself but I'm doing something wrong. Also got another question since I need a better code to text ratio to submit this question. Why when I alert(); img_top does it say object object?
$(document).ready(function(){
var img_height = $("#head").outerHeight();
var img_top = $("#head").offset();
var img_bot = img_height + img_top;
$(window).scroll(function(){
var wind_pos = $(window).scrollTop();
$("p").html(wind_pos);
if(wind_pos > img_bot){
$("#head").addClass("hide");
}
});
});
*{
margin: 0;
padding: 0;
}
body{
height: 4000px;
}
#head{
height: 600px;
background-color: blue;
}
.hide{
display: none;
}
p{
background-color: yellow;
width: 100%;
height: 50px;
}
<div id="head">
</div>
<p>
</p>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
jQuery.offset() return object representing position of the matched element, you are suppose to read top property of it.
$(document).ready(function() {
var img_height = $("#head").outerHeight();
var img_top = $("#head").offset().top;
var img_bot = img_height + img_top;
$(window).scroll(function() {
var wind_pos = $(window).scrollTop();
$("p").html(wind_pos);
if (wind_pos > img_bot) {
$("#head").addClass("hide");
}
});
});
* {
margin: 0;
padding: 0;
}
body {
height: 4000px;
}
#head {
height: 600px;
background-color: blue;
}
.hide {
display: none;
}
p {
background-color: yellow;
width: 100%;
height: 50px;
}
<div id="head">
</div>
<p>
</p>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
img_top
is an object because
$("#head").offset();
returns an object with top and left offsets,
you have to use
$("#head").offset().top
in your calculation
Related
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
I'm having a hard time figuring out why the code below doesn't work as expected.
What I'm trying to achieve is same functionality with position:sticky whereas when the scrolled reaches the top of the #second-header then fixes its position below the #header which is also fixed, however, the height of the #header is unknown which is I believe can be calculated using the function outerHeight(true) on JQuery.
Then after reaching out to the bottom of the #second-header-container, remove the fixed position of #second-header turning it back to normal position.
Due to browser compatibility issues and other customization, I cannot simply use the position:sticky of css.
It looks like my logic is wrong, and I need help.
jQuery(document).ready(function(){
var $document = jQuery(document);
var header = jQuery('#header');
var second_header = jQuery('#second-header-container').find('#second-header');
var second_header_container = jQuery('#second-header-container');
var second_header_offset = second_header.offset().top;
var second_header_container_offset = second_header_container.offset().top;
jQuery(window).scroll(function(){
var top_margin = header.outerHeight(true);
var second_header_height = second_header.outerHeight(true);
var second_header_container_height = second_header_container.outerHeight(true);
if( jQuery(window).scrollTop() > (second_header_offset - second_header_height) && jQuery(window).scrollTop() < second_header_container_height) {
second_header.addClass('fixer');
second_header.css({position:'fixed', top:top_margin, 'z-index':'999999'});
} else {
second_header.removeClass('fixer');
second_header.css({position:'relative', top:'0px', 'z-index':'0'});
}
});
});
*{
color: #FFFFFF;
padding: 0;
margin: 0;
}
.fixer{
position: fixed;
width: 100%;
}
#header, .banner, #second-header, .contents{
padding: 5px;
}
#header{
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner{
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container{
min-height: 300px;
background-color: #775F5E;
}
#second-header{
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents{
min-height: 200px;
background-color: #97A36D;
}
.footer{
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
To achieve this you need first check if the scroll height is near the second div header and within the height of the second div. Then add a class that make it stick below the main header. I have created a sticky class and added it while scrolling conditions are met.
Please check below code
jQuery(document).ready(function() {
var headerHeight = $('#header').outerHeight(true);
var secondHeaderContainer = $('#second-header-container');
const secondHeaderTopPos = secondHeaderContainer.offset().top;
const secondHeaderContainerHeight = $(secondHeaderContainer).height();
$(window).scroll(function() {
const scrollTop = $(this).scrollTop();
const secondContainerHeightEnd = secondHeaderContainerHeight + secondHeaderTopPos - $('#second-header').height() - headerHeight;
if (((secondHeaderTopPos - headerHeight) <= scrollTop) && (secondContainerHeightEnd >= scrollTop)) {
$('#second-header').addClass('sticky').css('top', headerHeight);
} else {
$('#second-header').removeClass('sticky');
}
});
});
* {
color: #FFFFFF;
padding: 0;
margin: 0;
}
.sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.fixer {
position: fixed;
width: 100%;
}
#header,
.banner,
#second-header,
.contents {
padding: 5px;
}
#header {
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner {
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container {
min-height: 300px;
background-color: #775F5E;
}
#second-header {
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents {
min-height: 200px;
background-color: #97A36D;
}
.footer {
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
I need to add class to header depend of section its by. here is my code
.navigation {
position: fixed;
background: white;
width: 400px;
height:15px;
border: 1px solid #000;
color: orange;
}
section {
display: block;
width: 100%;
height:200px;
}
.first-section {
background-color: black;
}
.second-section {
background-color: white;
}
<div id="nav" class="navigation">menu</div>
<section class="first-section" id="a"></section>
<section class="second-section" id="b"></section>
<section class="third-section" id="c"></section>
I guess I need some jQuery code to add class to .navigation when its bring to .second-section JSFiddle link
I played a little with your code and finally came to this:
function style_in_section(elementId, styleClassName, sectionClassName) {
var pos = window.pageYOffset;
var element = document.getElementById(elementId);
var section = document.getElementsByClassName(sectionClassName)[0];
if ((pos >= section.offsetTop) && (pos < section.offsetTop + section.offsetHeight)) {
element.classList.add(styleClassName);
} else {
element.classList.remove(styleClassName);
}
}
window.onscroll = function() {
style_in_section("nav", "nav-black", "second-section");
style_in_section("nav", "nav-gray", "third-section");
};
.navigation {
position: fixed;
width: 400px;
height: 15px;
border: 1px solid #000;
background: white;
color: orange;
}
/* I added styles here */
.nav-black {
background: black;
}
.nav-gray {
background: gray;
}
section {
display: block;
width: 100%;
height: 600px;
}
.first-section {
background-color: black;
}
.second-section {
background-color: white;
}
.third-section {
background-color: yellow;
}
<div id="nav" class="navigation">menu</div>
<section class="first-section" id="a"></section>
<section class="second-section" id="b"></section>
<section class="third-section" id="c"></section>
Is that the kind of things you want to achieve?
Note that I used vanilla JavaScript.
I hope it helps.
Please see this
This adds the selected class to your nav when the user scrolls into second-section.
JS:
var target = $(".second-section").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
$('#nav').addClass('selected');
}
}, 0);
CSS:
.selected {
background-color:blue;
}
Get the latest version of jQuery from here - the fiddle uses jQuery version 3.3.1
EDIT:
Add this to your footer.php file in your Wordpress theme.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
var target = $(".second-section").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
$('#nav').addClass('selected');
}
}, 0);
</script>
My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.
Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>
Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.
I have several elements and I want a function to get the width and offset of each element when I do click. I want to save both values of each element so I can access to it from outside the function and do stuffs. I tried this code but im stuck. thx.
$(document).ready(function() {
$("div>div").off("click").click(function() {
var checkWidth ;
var checkLeft ;
function checkPosition() {
$("div>div").each(function() {
checkWidth = $(this).width();
checkLeft = $(this).offset().left;
});
return [checkWidth, checkLeft];
}
var test = checkPosition()
alert(test);
});
// if( width of second element is # && offset of third element is # ) {
// do some thing ;
ยจ // }
})
div div{
position: relative;
height: 100px;
width: 100px;
margin-top: 20px;
}
.rectangle1{
background-color: black;
width: 100px;
left: 10px;
}
.rectangle2{
background-color: red;
width: 200px;
left: 30px;
}
.rectangle3{
background-color: black;
left: 60px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div>
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
</div>
</body>
define array out of function to make it global and also use each(index) to properly set the values of array:
$(document).ready(function() {
var myarray=[];
$("div>div").off("click").click(function() {
var checkWidth ;
var checkLeft ;
function checkPosition() {
$("div>div").each(function(index) {
checkWidth = $(this).width();
checkLeft = $(this).offset().left;
myarray[index]=[checkWidth,checkLeft];
});
return myarray;
}
var test = checkPosition()
alert(test);
});
//if( width of second element is # && offset of third element is # ) {}
// if (myarray[1][0]==130 && myarray[2][1]==120){}
// as you have a two dimensional array and javascript array starts from 0:
// myarray[n][0] will return the width of n+1(th) element
// myarray[n][1] will return the offset of n+1(th) element
})
div div{
position: relative;
height: 100px;
width: 100px;
margin-top: 20px;
}
.rectangle1{
background-color: black;
width: 100px;
left: 10px;
}
.rectangle2{
background-color: red;
width: 200px;
left: 30px;
}
.rectangle3{
background-color: black;
left: 60px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
</div>
</body>
I have created a jsfiddle for the answer. Check it here https://jsfiddle.net/dj2jdzrp/
var divProperties;
$("#outerDiv > div").click(function(e) {
divProperties = {"offset" : $(this).offset() , "width" : $(this).width() }
alert('anchor clicked!'+ divProperties.offset.left + 'width'+ divProperties.width);
});