Hallo ich habe ein paar Probleme mit Fade in/out beim scrollen.
1. Für das Sichtbar machen des DIV mit der ID #pfeil der per CSS auf Display: none und mit javascript sichtbar gemacht werden soll, wen man runterscrollt, funktioniert nicht im IE und im Opera blendet der DIV #pfeil sich manchmal nicht aus!
2. Für das Einblenden und Ausblenden mit javascript benötige ich leider diese jquery.js diese ist aber sehr groß, geht das nicht ohne diese Datei? Als ich jquery.js gelöscht habe, hat DIV #pfeil nur noch geblinkt.
3. Kann man machen, das wen der DIV #pfeil sichtbar ist nur einmal anklickbar ist und nachdem es wieder unsichtbar ist und wieder sichtbar wird, wieder anklickbar ist?
Hier mal der code der funktioniert im HTML:
<body>
//Das ist der Anker
<a name="oben" id="oben"></a>
//Das ist der DIV mit der ID #pfeil
<div id="pfeil"><a href="#oben">nach oben</a></div>
//Hier wird das externe javascript eingebunden auch das
große jquery.js das ich weg haben will!
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/scroll.js"></script>
</body>
</html>
Hier das externe javascript scroll.js:
//Hier wird langsam zum Anker hochgescrollt funktioniert super
muss nichts dran verändert werden, glaube ich!
// JavaScript Document
<!-- jQuery Code -->
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
if ($.browser.opera) {
var target = 'html';
}else{
var target = 'html,body';
}
$(target).animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
return false;
});
//Hier wird #pfeil Ein/Ausgeblendet hier muss was dran
gemacht werden das bezieht sich auf das jquery.js!
$(window).load(function ()
{
$(window).scroll(function ()
{
if( window.pageYOffset > 200 )
{
$('#pfeil:hidden').fadeIn('slow');
}
else
{
$('#pfeil').fadeOut('slow');
}
});
});
Forum
