Changing a div's opacity when the user scrolls - javascript

I'm making a website and I want the header (named floatHeader in my code) to be invisible at the start and then becomes visible once you start to scroll. I have tried my best to do it with JQuery but I'm not very experienced, so any advice would be much appreciated.
Here is the current code that I have.
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.floatHeader').css("opacity", 1);
}
else{
$('.floatHeader').css("opacity", 0);
}
});

Your code is working fine. You just need to include jQuery to your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Here is your fiddle.

You missed to load any version of jquery
Working Demo

I will suggest you to use the jquery plugin.
here is the link: http://stickyjs.com/

You have missed adding jquery in your fiddle code. So add jquery file in your code in tag like this.
<script src="http://code.jquery.com/jquery-latest.js"></script>
Also If you want the header to be invisible at start then set the "style:display:none;" in your header. This will hide your header at start.
<div class="header" style="display:none"></div>
Here is the updated fiddle.

Related

Jquery “Smooth Scroll” not working

I have the following problem:
I tried to make a smooth, slow scroll to the top when clicking on a link using jQuery. I used the following script:
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
});
On top of the page I have a <h1>-Tag with the id:start, and at the bottom I have a link defined: a href="#start">Back to top</a>
jQuery script included.
Does anybody know why it's not working in my case, but working here?
Thanks for your help!
Your code seems to work fine, when creating code snippets, be sure to include all code (html & javascript)..
please take a look at the jsfiddle i put together for you.
https://jsfiddle.net/gfe3c43u/
HINT: Make sure that you are including the proper libraries wherever you are trying to run this code (note: my jsfiddle is using jquery 2.1.0)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Using JavaScript to shrink navbar

I tried to use this example to add a shrink-on-scroll navbar to a webpage, but when I copied their Javascript and CSS rules across to my document, it no longer worked. The shrink class is not added to my <nav> elements like it is on their demo. When I downloaded their demo code, it didn't work either, despite working in the online example.
This is the JavaScript I've used:
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
});
I have also tried using this script with the first (and last) lines removed, as is shown elsewhere in the example.
The only answer I can think of is that Chrome refuses to execute JavaScript on local files. Is this the case, or have I missed something?
make sure you include jquery into your html BEFORE your external js file , ex:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Though seems you have already figured out the problem - just a small suggestion is to try writing your code like this - it will look much better :)
$(window).scroll(function(){
var liveview = $(document).scrollTop();
if (liveview > 120) {
$("nav").addClass("shrink");
} else {
$("nav").removeClass("shrink");
}
});

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

Need to slide in header on load

I am working on a site and would like the header to slide into the page from the top after the rest of the page has loaded.
Can anyone help with this?
Thanks
site is at choptlogic.com/atmananda
pw 123
As Chris Moutray suggests in his comment to your question, an ideal solution would be to use jQuery and one of its animations, e.g.,:
$(function() {
// When document is ready show the header using slideDown
// See http://api.jquery.com/slideDown/
$("#myHeader").slideDown(1000, function() {
// Animation complete callback
});
});​
To illustrate, I just made a simple example of how to accomplish such effect using jQuery and the slideDown animation - the example is placed at this jsFiddle: http://jsfiddle.net/WAQLz/
References: http://api.jquery.com/slideDown/

how do I add focus to a textarea after scrolling to it?

I am using the following script to scroll to the top of a scrolling DIV when a link is clicked:
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('#disqus_thread').animate({scrollTop: $("#"+id).position().top},3000,'easeOutQuint');
}
</script>
Here's the html for the link:
<div id="commenttext"><img src="files/comment.png" class="imgHoverable"></div>
I would like the textarea that is underneath the DIV that is scrolled to to have the focus added to it after the scroll. I presume this would mean adding code something like this:
$("textarea.placeholder").focus();
But I am not sure how to include this in the above script. I tried adding it as a line at the end of the script, but it didn't work.
Could someone help me out with this?
Thanks,
Nick
function goToByScroll(id){
$('#disqus_thread')
.animate({scrollTop: $("#"+id).position().top},
3000,
'easeOutQuint',
function() { $("textarea.placeholder").focus(); }
);
}
The last argument when passed this way is the complete callback.
Documentation.

Categories

Resources