i have a function to stick the nav sidebar to the top after some scrolling.but when my screen minimizes the logo on the top shortens and the position of the nav changes.so i wrote another 'if' function inside the first one to solve the problem.now the position is correct but the nav side bar is fixing on the top while scrolling.can you please help me....the function is as below....
$(function() {
var stickyHeaderTop = $('#myScrollspy').offset().top;
var yy = document.getElementById("cor").clientHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#myScrollspy').css({
position: 'fixed',
top: '8px',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
} else {
setInterval(function() {
if (yy < '490') {
var yu = '500' - yy;
$('#myScrollspy').css({
position: 'absolute',
top: ''
700 '-yy',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
}, 30);
}
});
});
You have some syntax issues, have mentioned them in the comments below.
if (yy < 490) { //syntax issue here
var yu = 500 - yy; //syntax issue here
$('#myScrollspy').css({
position: 'absolute',
top: (700 - yy)+'px', //syntax issue here
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
document.getElementById("cor").clientHeight will return an int(number).
Check element.clientHeight
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().
Related
Fist of all, sorry for my bad english.
I've this site with a company logo at the top and a navbar down it. I wanna change the navbar position to the top when I scroll past the company logo.
I try to change it with CSS in:
.navbar-fixed {
position: relative;
height: 56px;
z-index: 1000;
}
to...
.navbar-fixed {
position: top;
height: 56px;
z-index: 1000;
}
using Materialize.js on the $(document).ready(function (){}) with the next algorhythm:
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-fixed").css('position', 'top');
} else {
$('.navbar-fixed').css('position', 'relative');
}
});
}
but it didn't works.
First of all, css property position doesn't have top value.
Okay, here's a script taken 3 minutes of my time. I believe you can easily improve it to let it suit your needs. Say your company logo has id="logo":
function fixNavbar() {
var $logo = $('#logo'),
$nav = $('.navbar-fixed'),
offset = $logo.offset(),
logoHeight = $logo.height(),
distance = offset + logoHeight,
scroll = $(window).scrollTop();
if (scroll >= distance) {
$nav.css({
'position': 'fixed',
'top': '0',
'right': '0',
'left': '0'
});
} else {
$nav.css({
'position': 'relative',
'top': 'auto',
'right': 'auto',
'left': 'auto'
});
}
}
$(window).scroll( function() {
fixNavbar();
});
If you do not know what position:sticky is, watch this 20 second long video: https://www.youtube.com/watch?v=jA67eda5i-A .
This CSS feature was in talks in W3 and implemented in gecko I believe. But that is besides the point, the point is that not all browsers support it and I really want that functionality.
Is there any way I can get this using a mix of CSS and/or javascript and/or jquery?
There is an easy jquery plugin for this:: http://stickyjs.com/
To avoid using a plugin, i have created the following javascript method using jquery 1.8+.
The first argument is the element that you want to set sticky.
The second argument is optionnal and is a boolean to enhance the browser performance by setting a small timeout of 300ms.
function simulateSticky(elt, timeout) {
var move = function() {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(document).height() - scrollTop - $(window).height();
var eltTop = elt.parent().offset().top;
var eltBottom = $(document).height() - eltTop - elt.parent().outerHeight();
if (scrollTop < eltTop) { // Top case
elt.css({
position: "absolute",
width: "100%",
top:"auto",
right: "0px",
bottom: "auto",
left: "0px",
});
}
else if (scrollTop >= eltTop && scrollBottom >= eltBottom) { // Middle case
elt.css({
position: "fixed",
width: elt.parent().outerWidth(),
top:"0px",
right: "auto",
bottom: "auto",
left: "auto",
});
}
else { // Bottom case
elt.css({
position: "absolute",
width: "100%",
top:"auto",
right: "0px",
bottom: "0px",
left: "0px",
});
}
};
// Use of a timeout for better performance
if (timeout) {
var timeoutId;
$(window).scroll(function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
move();
}, 300);
});
}
else {
$(window).scroll(move);
}
// Initial call
move();
}
I have a table on the right of my page( with id="efficacia"). I wrote this JS script in order to shift left/right clicking on it
JavaScript
$("#efficacia").click(function() {
var posizione = $("#efficacia").position();
if(posizione.right != 0) {
$(this).animate({
right: '0'
}, 1000);
} else {
$(this).animate({
right: '-202'
}, 1000);
}
});
CSS
#efficacia {
position: fixed;
right: -202px;
top: 200px;
cursor: pointer;
z-index: 100;
}
My script works well for the first "click", then when I click again it does not shitf on the right of 202px. It looks like that function does not enter in else statemet.
position().right does not exist. Only top and left.
http://api.jquery.com/position/
Base your condition on left attribute and it will work
position doesn't return a right property.
You can get the right css property so:
$("#efficacia").click(function() {
var right = parseInt($(this).css('right'));
if(right != 0) {
$(this).animate({
right: '0'
}, 1000);
} else {
$(this).animate({
right: '202'
}, 1000);
}
});
See the DEMO.
If you want get position of all corners then you can use getBoundingClientRect(). It will returns bottom, right, left, top, width and height of your div. But, of course, it will return values that starts from left corner.
var boundingBox = $(this).get(0).getBoundingClientRect();
console.log(boundingBox.right);
Read about getBoundingClientRect()
There's an error in your code at right: '-202'. You have to specify right: '-202px'.
Here's the updated code:
$("#efficacia").click(function() {
var right = $(this).css('right');
if(right != "0px") {
$(this).animate({
right: '0px'
}, 1000);
} else {
$(this).animate({
right: '-202px'
}, 1000);
}
});
That's it
jQuery.position() doesn't return value for style.right. It returns only
Object{top: somVal, left: somVal}
so if u want to get the value of right then get it from style attribute
Eg-
$("#efficacia").click(function() {
// var posizione = $("#efficacia").position();//here right is undefined
var right=this.style.right.replace("px", "") * 1;//fetch value of right from style
if(right != 0) {
$(this).animate({
right: '0'
}, 1000);
} else {
$(this).animate({
right: '202'
}, 1000);
}
});
I coded a little script to make a little animation, but when I move the cursor 10 times very fast over the div, the div moves 10 times. I make a global var and a if query, but it doesn't work.
Code:
var working = false;
$(document).ready(function () {
$("#div1").attr("style", "position:absolute;top:0px;left:0px;");
$("#div2").attr("style", "position:absolute;top:0px;right:0px;");
$("#div3").attr("style", "position:absolute;bottom:0px;left:0px;");
$("#div4").attr("style", "position:absolute;bottom:0px;right:0px;");
});
function animon(id) {
if (working == true) return false;
var working = true;
if (id == "1") $("#div1").animate({
position: 'absolute',
top: '0px',
left: '60px'
}, "slow");
if (id == "2") $("#div2").animate({
position: 'absolute',
top: '0px',
right: '60px'
}, "slow");
if (id == "3") $("#div3").animate({
position: 'absolute',
bottom: '0px',
left: '60px'
}, "slow");
if (id == "4") $("#div4").animate({
position: 'absolute',
bottom: '0px',
right: '60px'
}, "slow");
}
function animoff(id) {
if (id == "1") $("#div1").animate({
position: 'absolute',
top: '0px',
left: '0px'
}, "slow");
if (id == "2") $("#div2").animate({
position: 'absolute',
top: '0px',
right: '0px'
}, "slow");
if (id == "3") $("#div3").animate({
position: 'absolute',
bottom: '0px',
left: '0px'
}, "slow");
if (id == "4") $("#div4").animate({
position: 'absolute',
bottom: '0px',
right: '0px'
}, "slow");
var working = false;
}
The animon() function ist bounded at the onmouseover event and the animoff() function to the onmouseout event. The working boolean does check if an div container is moved.
You want to use .stop().
$(document).ready(function(){
$("#div1").attr("style", "position:absolute;top:0px;left:0px;");
$("#div2").attr("style", "position:absolute;top:0px;right:0px;");
$("#div3").attr("style", "position:absolute;bottom:0px;left:0px;");
$("#div4").attr("style", "position:absolute;bottom:0px;right:0px;");
});
function animon(id){
if(id=="1")
$("#div1").stop(true).animate({position:'absolute',top:'0px',left:'60px'},"slow");
if(id=="2")
$("#div2").stop(true).animate({position:'absolute',top:'0px',right:'60px'},"slow");
if(id=="3")
$("#div3").stop(true).animate({position:'absolute',bottom:'0px',left:'60px'},"slow");
if(id=="4")
$("#div4").stop(true).animate({position:'absolute',bottom:'0px',right:'60px'},"slow");
}
function animoff(id){
if(id=="1")
$("#div1").stop(true).animate({position:'absolute',top:'0px',left:'0px'},"slow");
if(id=="2")
$("#div2").stop(true).animate({position:'absolute',top:'0px',right:'0px'},"slow");
if(id=="3")
$("#div3").stop(true).animate({position:'absolute',bottom:'0px',left:'0px'},"slow");
if(id=="4")
$("#div4").stop(true).animate({position:'absolute',bottom:'0px',right:'0px'},"slow");
}
I would like to have a google map on my page in its own column, that will slide up and down to match the scroll height of the browser window. I've seen this functionality on a few sites (yelp comes to mind). Does anyone know a good jQuery plugin that implements this functionality? I am not even sure how to search for such a plugin because I'm not exactly sure what to call it.
Edit: Using Alley's solution, I came up with this as the final answer:
$(function() {
$(window).scroll(function() {
var $map = $('#mymap');
var locMin = 0;
var locMax = $map.parent().height() - $map.height()
var dif = $(window).height() / 2 - $map.height() / 2;
var loc = dif + $(window).scrollTop() - $map.parent().offset().top;
if (loc > locMax)
loc = locMax;
if (loc < locMin)
loc = locMin;
$map.css('top', loc);
})
make sure to use CSS to make the #mymap element to be position: relative.
Just wrote one quickly for you:
$(function() {
$(window).scroll(function() {
if($('#map').offset().top <= 0) {
$('#map').css({ position: 'fixed', top: 0, left: '50%', 'margin-left': YOUR PAGE WIDTH / 2 - $('#map').width() })
} else {
$('#map').css({ position: 'relative', top: 'auto', left: 'auto', margin:0 })
}
})
})