Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a div which represents a navbar on the page. Before it are other elements like logos, banners and etc...
I want to do navbar sticky only when it's is scrolled down, i.e. when i scroll down and left it behind i need to add class to it. How can i catch this moment?
There should be something like this:
jQuery(document).scroll(function(){
// if jQuery('#navbar') is already scrolled down add to it .navbar-fixed else remove
});
You can get the position of the scrollbar with jQueryElement.scrollTop(). You can get the offset from the 'navbar' with jQueryElement.offset().top.. You can use this to calculate if the user scrolled past the navbar:
$(document).scroll(function(){
if( $(document).scrollTop() > $('#navbar').offset().top ) {
$('#navbar').addClass('navbar-fixed');
} else {
$('#navbar').removeClass('navbar-fixed');
}
});
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to know how to move the logo from the top left corner to the center when I start scrolling. Thanks!
Have a onscroll event on the html element you want to scroll;
Inside onscroll event handling change the style of logo element to align:center;
something like below(psuedo code):
<div onscroll="handleMyScrolling(event)">
<logo id="logo"></logo>
</div>
<script>
function handleMyScrolling(event){
document.getElementById('logo').style= // your style to bring the element to
center.
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
In this website, the header is animated when you scroll the page a bit. Can you please advise what techniques, tools and best practices (broadly) one may use to achieve this and similar effects?
Use javascript to add a class to the header element when the scroll position is at the top (bind to the onscroll event and check if at the top or not).
Then define new postiions for your elements in css when that class is applied, and use the transition css property to animate it
Well for the animation occurring when you scroll you would use
$(document).scroll(function() {
if($(document).scrollTop() === 0);
} else {
});
As for the animation, there are many ways to do this and the question is too broad, as stated above.
the way I personally do it, is to add a class to the body on scroll. I then style the particular element I want to change (in your case the header) accordingly. I add it to the body instead of the particular element in case I want to manipulate other selectors, etc.
This is the JS I use:
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 50) { //distance scrolled before effect takes place
jQuery("body").addClass("scrolled");
} else {
jQuery("body").removeClass("scrolled");
}
});
Then I'd add some CSS for example:
header{height:100px;transition:all, .4s, ease; /*Make sure to use all cross-browser markup*/;}
body.scrolled header{height:50px;}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a full-page header with a logo in the center and an arrow below. I need the arrow to disappear if it scrolls up by 10px or more. To this end, I am using .scrollTop() and .hide() as shown in the following jfiddle. However it does not disappear on scrolling up.
Would appreciate anyone putting me on the right path to find why the arrow isn't hiding with .hide()?
First of all include jquery in your jfiddle (settings icon in the js part of the screen). And use the $j also by $j('#arr_down').hide(); and $j('#arr_down').hide(); you forgot the j in your example
$j=jQuery.noConflict();
$j(document).ready(function() {
$j(window).scroll(function () {
if ($j(this).scrollTop() > 10)
$j('#arr_down').hide();
else
$j('#arr_down').show();
});
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm working on my diploma thesis, an interactive programming language which should run in browser eniroment using javascript.
In the moment I use an input line and enter event to start interaction and give feedback.
I would like to change this to have a textinput and a second field next to it where the result is shown. I use
<div id = "code" conetenteditable="true"> </div>
<div id= "result"><div>
Both are placed in a table row, so they are next to each other
how can I get result to scroll according to the actual scroll of code?
By the way I use jquery as library.
Thanks,
Rainer
In order for an element to be fixed on a page and remain there as you scroll, you must use CSS.
The code should look like:
<div id = "code" conetenteditable="true" style="position:fixed;"> </div>
<div id= "result" style="position:fixed"><div>
You can position them however you want with top, bottom, left, right.
Use css fixed position for your both dives.
like that:
#id,#result{
position: fixed;
}
I believe your problem is not with the element position but with the scroll of the text inside of the #result div.
If that's the case, you might want to use the overflow css property to have the div show an inner scrollbar.
#result {
overflow-y:auto;
max-height:100px;
}
in this example, the div will scroll if the text inside it stretches above 100px.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Basically I want to try making a simple mini map with HTML,but I cant figure it out.
Can someone give me a sample?
Just 2 image that are the same but with different sizes. One is small and the other is big, And if you click on any coordinates of the small image,the large image the show where you clicked.
I'm still new at HTML and want to learn more, just need a sample so I can analyze on how to make it.
like i said create a image , find the mouse coordinates over that image.
create a div with the same image and set the background position.
replace YOURMAP with a image.
var img,w,h,mu=true,map,MAP='YOURMAP';
function pos(e){
var x=e.pageX-img.offsetLeft,y=e.pageY-img.offsetTop,
left=((w/img.width*x)-(map.offsetWidth/2))*-1,
top=((h/img.height*y)-(map.offsetHeight/2))*-1;
map.style['background-position']=left+'px '+top+'px';
}
window.onload=function(){
img=document.createElement('img');
img.onload=function(){
w=this.width;h=this.height;
img.style.width='200px';
}
img.src=MAP;
map=document.createElement('div');
map.style.background='#000 url('+MAP+') no-repeat 0 0';
map.style.width='200px';
map.style.height='200px';
document.body.appendChild(img);
document.body.appendChild(map);
img.addEventListener('mousedown',function(e){
mu=false;pos(e);e.preventDefault()
},false);
img.addEventListener('mousemove',function(e){
mu||pos(e)
},false);
img.addEventListener('mouseup',function(e){
mu=true
},false);
}
Demo http://jsfiddle.net/m3snq/3/ or http://jsfiddle.net/m3snq/6/
if you don't understand something just ask..