Styjun

Mathematical uses of string theory

What is the hex versus octal timeline?

Why did this happen to Thanos's ships at the end of "Avengers: Endgame"?

How to avoid using System.String with Rfc2898DeriveBytes in C#

What is this symbol: semicircles facing eachother

Why is Boris Johnson visiting only Paris & Berlin if every member of the EU needs to agree on a withdrawal deal?

What to say to a student who has failed?

When translating the law, who ensures that the wording does not change the meaning of the law?

Script that helps people make better choices

How to stop this icon from appearing on the taskbar?

Why is 日本 read as "nihon" but not "nitsuhon"?

Did the British navy fail to take into account the ballistics correction due to Coriolis force during WW1 Falkland Islands battle?

Can I switch to third-person while not in 'town' in Destiny 2?

Is there any practical application for performing a double Fourier transform? ...or an inverse Fourier transform on a time-domain input?

Why can't an Airbus A330 dump fuel in an emergency?

Concatenation of the result of a function with a mutable default argument in python

Potential new partner angry about first collaboration - how to answer email to close up this encounter in a graceful manner

Is “I am getting married with my sister” ambiguous?

Is refusing to concede in the face of an unstoppable Nexus combo punishable?

Why does my house heat up, even when it's cool outside?

How much code would a codegolf golf if a codegolf could golf code?

How can I watch the 17th (or last, if less) line in files of a folder?

How to write triplets in 4/4 time without using a 3 on top of the notes all the time

Why doesn't the Falcon-9 first stage use three legs to land?

NavBar Transition CSS Trouble

Set cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSTransitions on the display: propertyHow can I transition height: 0; to height: auto; using CSS?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have a Navbar which makes a transition when I scroll down.

When I scroll up, the transition doesn't work and I don't know why. Can someone help me resolve this?

The JS code is adding the scrolled class when Math.round($(window).scrollTop()) > 100.

@supports (position: sticky) 
 body 
 padding-top: 0;
 

 header 
 position: sticky;
 



.scrolled 
 transition: 0.5s ease;
 

.scrolled.header 
 height: 50px; 
 background-color: rgba(0, 0, 0, 0.8);
 transition: 0.5s ease;
 

.scrolled.header .header-menu 
 line-height: 40px; 
 transition: 0.5s ease;
 

<div class="block">
 <header class="header">
 <a href="#" class="header-logo"><i class="fas fa-signal"></i>NAME</a>
 <nav class="header-menu">
 <a href="#">Accueil</a>
 <a href="#">Compétences</a>
 <a href="#">Parcours</a>
 <a href="#">Projets</a>
 <a href="#">Hobbies</a>
 <a href="#">Contact</a>
 </nav>
 <a href="#" class="toggle" id="burgerButton">
 <i class="fas fa-bars"></i>
 </a>
 </header>
</div>

javascript html css

share|improve this question

edited Mar 27 at 18:26

Al.G.

3,02855 gold badges2525 silver badges4545 bronze badges

asked Mar 27 at 16:25

Nicolas HermosillaNicolas Hermosilla

311 bronze badge

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi! Welcome to SO! In order for folks to help they generally appreciate an MCVE to reproduce the behavior describe and fully troubleshoot the issue. As it sits if we can't reproduce the issue then it may be left to assumptions/guessing. As it sits we're note sure what the transition-property is in the first place and it'd difficult to visualize the issue you're describing.
  
  – Chris W.
  Mar 27 at 16:32
  

  
  
  
  

add a comment | 

0

I have a Navbar which makes a transition when I scroll down.

When I scroll up, the transition doesn't work and I don't know why. Can someone help me resolve this?

The JS code is adding the scrolled class when Math.round($(window).scrollTop()) > 100.

@supports (position: sticky) 
 body 
 padding-top: 0;
 

 header 
 position: sticky;
 



.scrolled 
 transition: 0.5s ease;
 

.scrolled.header 
 height: 50px; 
 background-color: rgba(0, 0, 0, 0.8);
 transition: 0.5s ease;
 

.scrolled.header .header-menu 
 line-height: 40px; 
 transition: 0.5s ease;
 

<div class="block">
 <header class="header">
 <a href="#" class="header-logo"><i class="fas fa-signal"></i>NAME</a>
 <nav class="header-menu">
 <a href="#">Accueil</a>
 <a href="#">Compétences</a>
 <a href="#">Parcours</a>
 <a href="#">Projets</a>
 <a href="#">Hobbies</a>
 <a href="#">Contact</a>
 </nav>
 <a href="#" class="toggle" id="burgerButton">
 <i class="fas fa-bars"></i>
 </a>
 </header>
</div>

javascript html css

share|improve this question

edited Mar 27 at 18:26

Al.G.

3,02855 gold badges2525 silver badges4545 bronze badges

asked Mar 27 at 16:25

Nicolas HermosillaNicolas Hermosilla

311 bronze badge

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi! Welcome to SO! In order for folks to help they generally appreciate an MCVE to reproduce the behavior describe and fully troubleshoot the issue. As it sits if we can't reproduce the issue then it may be left to assumptions/guessing. As it sits we're note sure what the transition-property is in the first place and it'd difficult to visualize the issue you're describing.
  
  – Chris W.
  Mar 27 at 16:32
  

  
  
  
  

add a comment | 

I have a Navbar which makes a transition when I scroll down.

When I scroll up, the transition doesn't work and I don't know why. Can someone help me resolve this?

The JS code is adding the scrolled class when Math.round($(window).scrollTop()) > 100.

@supports (position: sticky) 
 body 
 padding-top: 0;
 

 header 
 position: sticky;
 



.scrolled 
 transition: 0.5s ease;
 

.scrolled.header 
 height: 50px; 
 background-color: rgba(0, 0, 0, 0.8);
 transition: 0.5s ease;
 

.scrolled.header .header-menu 
 line-height: 40px; 
 transition: 0.5s ease;
 

<div class="block">
 <header class="header">
 <a href="#" class="header-logo"><i class="fas fa-signal"></i>NAME</a>
 <nav class="header-menu">
 <a href="#">Accueil</a>
 <a href="#">Compétences</a>
 <a href="#">Parcours</a>
 <a href="#">Projets</a>
 <a href="#">Hobbies</a>
 <a href="#">Contact</a>
 </nav>
 <a href="#" class="toggle" id="burgerButton">
 <i class="fas fa-bars"></i>
 </a>
 </header>
</div>

javascript html css

share|improve this question

edited Mar 27 at 18:26

Al.G.

3,02855 gold badges2525 silver badges4545 bronze badges

asked Mar 27 at 16:25

Nicolas HermosillaNicolas Hermosilla

311 bronze badge

@supports (position: sticky) 
 body 
 padding-top: 0;
 

 header 
 position: sticky;
 



.scrolled 
 transition: 0.5s ease;
 

.scrolled.header 
 height: 50px; 
 background-color: rgba(0, 0, 0, 0.8);
 transition: 0.5s ease;
 

.scrolled.header .header-menu 
 line-height: 40px; 
 transition: 0.5s ease;
 

<div class="block">
 <header class="header">
 <a href="#" class="header-logo"><i class="fas fa-signal"></i>NAME</a>
 <nav class="header-menu">
 <a href="#">Accueil</a>
 <a href="#">Compétences</a>
 <a href="#">Parcours</a>
 <a href="#">Projets</a>
 <a href="#">Hobbies</a>
 <a href="#">Contact</a>
 </nav>
 <a href="#" class="toggle" id="burgerButton">
 <i class="fas fa-bars"></i>
 </a>
 </header>
</div>

@supports (position: sticky) 
 body 
 padding-top: 0;
 

 header 
 position: sticky;
 



.scrolled 
 transition: 0.5s ease;
 

.scrolled.header 
 height: 50px; 
 background-color: rgba(0, 0, 0, 0.8);
 transition: 0.5s ease;
 

.scrolled.header .header-menu 
 line-height: 40px; 
 transition: 0.5s ease;
 

<div class="block">
 <header class="header">
 <a href="#" class="header-logo"><i class="fas fa-signal"></i>NAME</a>
 <nav class="header-menu">
 <a href="#">Accueil</a>
 <a href="#">Compétences</a>
 <a href="#">Parcours</a>
 <a href="#">Projets</a>
 <a href="#">Hobbies</a>
 <a href="#">Contact</a>
 </nav>
 <a href="#" class="toggle" id="burgerButton">
 <i class="fas fa-bars"></i>
 </a>
 </header>
</div>

@supports (position: sticky) 
 body 
 padding-top: 0;
 

 header 
 position: sticky;
 



.scrolled 
 transition: 0.5s ease;
 

.scrolled.header 
 height: 50px; 
 background-color: rgba(0, 0, 0, 0.8);
 transition: 0.5s ease;
 

.scrolled.header .header-menu 
 line-height: 40px; 
 transition: 0.5s ease;
 

<div class="block">
 <header class="header">
 <a href="#" class="header-logo"><i class="fas fa-signal"></i>NAME</a>
 <nav class="header-menu">
 <a href="#">Accueil</a>
 <a href="#">Compétences</a>
 <a href="#">Parcours</a>
 <a href="#">Projets</a>
 <a href="#">Hobbies</a>
 <a href="#">Contact</a>
 </nav>
 <a href="#" class="toggle" id="burgerButton">
 <i class="fas fa-bars"></i>
 </a>
 </header>
</div>

share|improve this question

edited Mar 27 at 18:26

Al.G.

3,02855 gold badges2525 silver badges4545 bronze badges

asked Mar 27 at 16:25

Nicolas HermosillaNicolas Hermosilla

311 bronze badge

share|improve this question

edited Mar 27 at 18:26

Al.G.

3,02855 gold badges2525 silver badges4545 bronze badges

asked Mar 27 at 16:25

Nicolas HermosillaNicolas Hermosilla

311 bronze badge

edited Mar 27 at 18:26

Al.G.

3,02855 gold badges2525 silver badges4545 bronze badges

edited Mar 27 at 18:26

Al.G.

3,02855 gold badges2525 silver badges4545 bronze badges

asked Mar 27 at 16:25

Nicolas HermosillaNicolas Hermosilla

311 bronze badge

asked Mar 27 at 16:25

Nicolas HermosillaNicolas Hermosilla

311 bronze badge

1 Answer
1

active

oldest

votes

0

If I understand correctly : When you scroll down you add the .scrolled class, and when you move up you remove it ?
If so, you should also add the transition : 0.5s ease; to the nav-bar itself. Because when you remove the .scrolled class, why would a transition occure if the nav haven't this specified in it's css ?

share|improve this answer

answered Mar 27 at 16:35

Hijack_HornetHijack_Hornet

8144 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks , it's fixed now ! the transition was on my navbar but as "0,5s ease" that's why it didn't work ... my bad.
  
  – Nicolas Hermosilla
  Mar 27 at 17:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm happy it helped you !
  
  – Hijack_Hornet
  Mar 27 at 17:10
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55382099%2fnavbar-transition-css-trouble%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

If I understand correctly : When you scroll down you add the .scrolled class, and when you move up you remove it ?
If so, you should also add the transition : 0.5s ease; to the nav-bar itself. Because when you remove the .scrolled class, why would a transition occure if the nav haven't this specified in it's css ?

share|improve this answer

answered Mar 27 at 16:35

Hijack_HornetHijack_Hornet

8144 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks , it's fixed now ! the transition was on my navbar but as "0,5s ease" that's why it didn't work ... my bad.
  
  – Nicolas Hermosilla
  Mar 27 at 17:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm happy it helped you !
  
  – Hijack_Hornet
  Mar 27 at 17:10
  

  
  
  
  

add a comment | 

0

If I understand correctly : When you scroll down you add the .scrolled class, and when you move up you remove it ?
If so, you should also add the transition : 0.5s ease; to the nav-bar itself. Because when you remove the .scrolled class, why would a transition occure if the nav haven't this specified in it's css ?

share|improve this answer

answered Mar 27 at 16:35

Hijack_HornetHijack_Hornet

8144 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks , it's fixed now ! the transition was on my navbar but as "0,5s ease" that's why it didn't work ... my bad.
  
  – Nicolas Hermosilla
  Mar 27 at 17:09
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm happy it helped you !
  
  – Hijack_Hornet
  Mar 27 at 17:10
  

  
  
  
  

add a comment | 

If I understand correctly : When you scroll down you add the .scrolled class, and when you move up you remove it ?
If so, you should also add the transition : 0.5s ease; to the nav-bar itself. Because when you remove the .scrolled class, why would a transition occure if the nav haven't this specified in it's css ?

share|improve this answer

answered Mar 27 at 16:35

Hijack_HornetHijack_Hornet

8144 bronze badges

share|improve this answer

answered Mar 27 at 16:35

Hijack_HornetHijack_Hornet

8144 bronze badges

answered Mar 27 at 16:35

Hijack_HornetHijack_Hornet

8144 bronze badges

answered Mar 27 at 16:35

Hijack_HornetHijack_Hornet

8144 bronze badges