Scroll i przezroczystość nie działają, dlaczego?

pytanie zadane 16 września 2016 w HTML i CSS przez Gandalf Obywatel (1,260 p.)

Chciałem zaimplementować opacity w kodzie przy określonej wysokości px, ale niestety kod nie wykonuje swojej funkcji. Pomoże ktoś?

<!DOCTYPE HTML>

<html>    
<head>
<script type="text/javascript">
	var target = $('div');
	var targetHeight = target.outerHeight();

	$(document).scroll(function(e){
    var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
    if(scrollPercent >= 0){
        target.css('opacity', scrollPercent);
    }
});
</script>

<style type="text/css">
body {height:2000px}

div {height:60px; background:#333;}

</style>

</head>

	<body>
		<div></div>
	</body>
</html>

1 odpowiedź

odpowiedź 16 września 2016 przez Grzegorz Stasiecki Użytkownik (630 p.)
edycja 17 września 2016 przez ScriptyChris

używasz jquery , a gdzie

$(document).ready(function(){
   /** tu umieść swój kod javascript */
});

jeżeli tego nie zrobisz javascript wykona się przed załadowaniem się strony, chyba że umieścisz go za znacznikiem </body>.

Brakuje również dołączonej biblioteki jquery.

1	komentarz 16 września 2016 przez FuruArt Nowicjusz (180 p.) Zamiast $(document).ready(function() { }); może użyć po prostu $(function(){ Kod do wykonania }); Nie mniej masz rację, nie dodał biblioteki jQuery do swojego dokumentu HTML.

komentarz 16 września 2016 przez Gandalf Obywatel (1,260 p.)

Rzeczywiście już dołączyłem zapomnianą bibliotekę do skryptu, natomiast nadal nie rozumiem zawarcia tej linii w kodzie:

$(function(){ Kod do wykonania });

aktualnie tak wygląda całość kodu który poprawiłem (oczywiście przepraszam za moją niewiedzę, ale obecnie potrzebuje dopasować ten skrypt do potrzeb na stronę)

<!DOCTYPE HTML>
 
<html>    
<head>
<script src="jquery-1.11.3.min.js"></script>

 
<style type="text/css">
body {height:2000px}
 
div {height:60px; background:#333; margin-top: 600px;}
 
</style>
 
</head>
 
    <body>
        <div></div>
    </body>
    
    <script type="text/javascript">
    $(document).ready(function(){
    var target = $('div');
    var targetHeight = target.outerHeight();
 
    $(document).scroll(function(e){
    var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
    if(scrollPercent >= 0){
        target.css('opacity', scrollPercent);
    }
	});
});
</script>
</html>

komentarz 17 września 2016 przez FuruArt Nowicjusz (180 p.)

Jesteś mi wstanie wytłumaczyć co konkretnie twój kod robi? Albo skąd go wziąłeś? Bo średnio umiem ogarnąć ten kod. Wytłumacz dokładnie co ma się dziać, kiedy i jak.