/    Sign up×
Community /Pin to ProfileBookmark

Element is not sliding down on scroll toggle.

Copy linkTweet thisAlerts:
May 06.2021

Right, LovableCodeMan here. I have a fixed circular menu which is supposed to slide down and nestle in the right corner of the screen when the user scrolls down. When at the top of the page, the top attribute is `top: -50px;`, when the user scrolls down, a CSS attribute is added to change the top margin to 100px in a sliding motion.

**JS**

`<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll => 500) {
$(“.stickyMenu”).addClass(“scroll_reveal”);
} else {
$(“.stickyMenu”).removeClass(“scroll_reveal”);
}
});
</script>
`

**CSS**

`
.stickyMenu{
display: block;
position: fixed;
top: -50px;
right: 20px;
background-color: #0D0155;
color: #fff;
padding: 10px 15px;
font-family: fontAwesome;
z-index: 9999999;
font-size: 18px;
border-radius: 30px;
}

.scroll_reveal{
top: 70px;
transition: 0.5s;

`

**Why is this menu not sliding down?**

to post a comment
Java

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@iamkajalJun 21.2021 — You should try this one...

**State One**

.top-header {<br/>
position: fixed;<br/>
top: 0;<br/>
left: 0;<br/>
width: 320px;<br/>
height: 60px;<br/>
}

.search { /* Container just in case we want more than just the search input to come along <EM>*/<br/>
position: absolute;<br/>
top: 155px;<br/>
left: 20px;<br/>
right: 20px;<br/>
input {<br/>
width: 265px;<br/>
transition: width 0.2s;<br/>
-webkit-appearance: none; /*</EM> Autoprefixer doesn't catch this */<br/>
}<br/>
}

.top {<br/>
height: 250px; /* Space in here for search */<br/>
padding-top: 40px;<br/>
position: relative;<br/>
}

**State Two**

.top-header {<br/>
...<br/>
.fix-search &amp; {<br/>
background: #eee;<br/>
}<br/>
}

.search { /* Container just in case we want more than just the search input to come along */<br/>
...<br/>
.fix-search &amp; {<br/>
position: fixed;<br/>
top: 10px;<br/>
input {<br/>
width: 250px;<br/>
}<br/>
}<br/>
}

**Switching States**

var wrap = $("#wrap");

wrap.on("scroll", function(e) {
<br/>
if (this.scrollTop &gt; 147) {<br/>
wrap.addClass("fix-search");<br/>
} else {<br/>
wrap.removeClass("fix-search");<br/>
}
<br/>
});
×

Success!

Help @TheLovableCodeMan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...