Computergenie.nl    

Computergenie.nl
  Registreer!
  Registreer
Homepage
Home
Top 10
Top 10
Forum
Forum
Prijsindex
Prijsindex
Nieuws
Nieuws
Downloads
Downloads
Hulp & Uitleg
Hulp & Uitleg
Uitgebreid zoeken
 
  Zoeken •  Gebruikerslijst  •  Gebruikersgroepen   •  Registreer  •  Profiel  •  Log in om je privť berichten te bekijken  •  Ben je al lid?  Log in! 
Ben je al lid?  Log in!
Kies uw onderwerp:
Computer-Cafť
Knowledge Base
Hardware
Software
Internet & netwerken
Games
Scripten & programmeren
Digitale fotografie & video
Multimedia
GSM & mobile
Sitecheck & links
OfficiŽle mededelingen
Feedback
ISL Light
Aanbiedingen
Markt-plaats
Hulp & Uitleg

Sponsors:

Cloud VPS

Relaties:

PC Beveiliger
Forum » Scripten & programmeren » Klikbare logo verdwijnt
[PERL]  Klikbare logo verdwijnt

Nieuw onderwerpNieuw antwoord
rvdentertainment Bericht Geplaatst op 13-12-2016 Reageer met quote
Nieuw lid
Beste genieŽn,

Ik ben momenteel bezig om mezelf javascript en jquery aan te leren alleen ik zit momenteel met een probleempje waar ik niet uit kom. Ik heb op mijn site een fixed header die van achtergrond kleur veranderd wanneer je naar beneden scrolt.

Omdat het nogal 2 verschillende kleuren zijn en in deze header ook een logo zit veranderd het logo ook mee van kleur zodat je het logo duidelijk blijft zien. Dit alles werkt redelijk naar behoren enkel krijg ik het niet voor elkaar om aan het 2e logo een klikbare url te koppelen.

Als je de site bezoekt dan krijg je het 1e logo te zien deze dient ook meteen als home button en op deze kan je ook gewoon klikken en werkt goed. Maar zodra je naar beneden scrolt en het vervangende logo komt tevoorschijn dan is dit 2e logo dus niet klik baar.

Ik heb al veel geprobeerd en zou niet weten hoe ik dit op kan lossen aangezien mijn kennis in javascript/jquery nog niet zo super groot is.

Hieronder de code die ik gebruik hoop dat iemand mij hiermee kan helpen.


HTML Gedeelte:
Code:

<div id="logo">
<div class="header-logo">
<div id="background-logo"></div>
<div id="labels">
<a href="#home" title="titel"></a>
</div>
</div>
</div>


CSS Gedeelte:
Code:

#labels a{
   width: 170px;
   height: 90px;
   display: block;
}
.header-logo{
    width: 170px;
   height: 90px;
    z-index:3;
   float: left;
   /*display: block;*/
}
.header-logo #background-logo, .header-logo #labels{
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
}

.header-logo #labels{
   width: 170px;
   height: 90px;
   background-image: url(../images/logo-idle.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 95%;
}

.header-logo #background-logo{
    width: 170px;
   height: 90px;
   background-image: url(../images/logo.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 95%;
}


Javascript Gedeelte:
Code:

<script>
   $(window).scroll(function() {
      if ($(this).scrollTop() > 400) {
         $( ".header-logo #background-logo" ).fadeIn();
         $( ".header-logo #labels").fadeOut();
      } else {
         console.log('there');
         $( ".header-logo #background-logo" ).fadeOut();
         $( ".header-logo #labels").fadeIn();
      }
   });
</script>

Nieuw onderwerpNieuw antwoord   


Forum » Scripten & programmeren » Klikbare logo verdwijnt

Powered by Cloud VPS - High Availability Cloud Servers