Hallo Zusammen,
ich habe ein Problem, bei dem ist seit Stunden dran sitze und einfach nicht weiter komme. Und zwar will ich, wenn der User auf meiner Website scrollt, dass sich beim scrollen die class meiner Navigationsbar ändert. Ich habe bereits einen JavaScript Code gefunden und alles implementiert, aber es geht nicht und da ich bei der Sprache noch nicht so gut bin, komme ich da als Anfänger nicht weiter villeicht kann mir ja jmd. helfen. Ich poste den Code unten. Falls etwas unverständlich ist, bitte frage!
Vielen Dank euch !
Java-Code scrolling_nav.js:
ich habe ein Problem, bei dem ist seit Stunden dran sitze und einfach nicht weiter komme. Und zwar will ich, wenn der User auf meiner Website scrollt, dass sich beim scrollen die class meiner Navigationsbar ändert. Ich habe bereits einen JavaScript Code gefunden und alles implementiert, aber es geht nicht und da ich bei der Sprache noch nicht so gut bin, komme ich da als Anfänger nicht weiter villeicht kann mir ja jmd. helfen. Ich poste den Code unten. Falls etwas unverständlich ist, bitte frage!
Vielen Dank euch !
PHP-Code:
<html <?php language_attributes(); ?> <?php storefront_html_tag_schema(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script src="scrolling_nav.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<script src="scrolling_nav.js"></script>
<div id="page" class="hfeed site">
<?php
do_action( 'storefront_before_header' ); ?>
<div class="menue_masterhead">
<header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
<div class="col-full">
<?php
/**
* Functions hooked into storefront_header action
*
* @hooked storefront_skip_links - 0
* @hooked storefront_social_icons - 10
* @hooked storefront_site_branding - 20
* @hooked storefront_secondary_navigation - 30
* @hooked storefront_product_search - 40
* @hooked storefront_primary_navigation_wrapper - 42
* @hooked storefront_primary_navigation - 50
* @hooked storefront_header_cart - 60
* @hooked storefront_primary_navigation_wrapper_close - 68
*/
do_action( 'storefront_header' ); ?>
</div>
<script src="scrolling_nav.js"></script>
</header><!-- #masthead -->
</div>
Code:
//jQuery to collapse the navbar on scroll $(window).scroll(function() { if ($(".site-header").offset().top > 10) { $(".site-header").addClass("top-nav-collapse"); } else { $(".site-header").removeClass("top-nav-collapse"); } });
Kommentar