-1
我已經嘗試了很多並且已達到此處。發生什麼錯誤我不明白。我失蹤的地方。請看看它。我希望按鈕請求一個建議，當我們向下滾動時，將其位置形式從水平改變爲垂直。我希望css類.vertical-pos和.head__get-in-touch-wrap通過函數進行更改。在此先感謝使用css和js更改滾動上的按鈕移動
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
} else {
span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
}
});
});html, body {
height: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: white;
display: block;
margin: 0px;
}
.main-menu {
float: right;
padding-top: 2%;
padding-right: 5%;
padding-left: 0;
margin: -90px 235px 0 0 !important;
list-style: none;
transition: opacity .6s 2.5s;
font-weight: 700;
}
.navbar--inverted .main-menu__item {
color: #000;
}
.main-menu__item {
display: inline-block;
margin: 0 10px;
font: 400 15px/20px 'Oswald',sans-serif;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: uppercase;
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu__item--request {
border:1px solid black;
cursor:pointer;
display:inline-block;
margin-right:0;
padding:15px 30px;
}
.main-menu__item > a {
color:black;
text-decoration:none;
font-weight: 700;
}
a {
background-color:transparent;
text-decoration:none;
}
a:active, a:hover {
outline:0;
color:#C1C1C1;
}
.menu-toggle {
position: absolute;
right: 4%;
display: none;
width: 44px;
height: 56px;
background: 0 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
border: 0 none;
padding: 4% 0 20px 20px;
z-index: 1;
align-items: flex-start;
}
.menu-toggle:hover{
color:#C1C1C1;
}
.logo{
margin:20px;
}
.main-block__line {
background:#171717;
display:none;
height:5px;
left:5%;
margin-left:15px;
position:absolute;
top:550px;
width:20px;
z-index:10;
}
.head__menu-btn__wrap {
display:block;
margin:-25px -40px 0 0;
position:fixed;
right:5%;
top:47px;
width:226px;
z-index:999;
}.head__menu-btn {
-webkit-transition:all 0.1s ease;
background-image:url(../pixster/menu-btn.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:45px 45px;
cursor:pointer;
display:block;
height:45px;
position:absolute;
right:0;
top:0;
transition:all 0.1s ease;
width:45px;
z-index:999;
}
.head__get-in-touch-wrap {
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
.vertical-pos{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.head__get-in-touch {
-webkit-transition:all 0.1s ease;
background-color:#0072F6;
border:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
margin-top:0;
padding:15px 0;
text-align:center;
text-transform:uppercase;
transition:all 0.1s ease;
width:146px;
}<header class="logo">
<img src="../pixster/logo.png" alt="Pixster Studio" />
</header>
<span class="main-block__line">
</span>
<div class="head__menu-btn__wrap">
<span class="head__menu-btn open-main-menu-button">
</span>
<span class="head__get-in-touch-wrap">
<a href="/contact" class="head__get-in-touch">Request a proposal</a>
</span>
</div>
<ul class="main-menu in-view">
<li class="main-menu__item"><a href="/about">About</a></li>
<li class="main-menu__item"><a href="/services">Services</a></li>
<li class="main-menu__item"><a href="/work">Work</a></li>
<li class="main-menu__item"><a href="/blog/">Blog</a></li>
<li class="main-menu__item"><a href="/contact">Contact</a></li>
</ul>
\t \t \t \t <button data-menu-button="" type="button" class="menu-toggle">
<span class="menu-toggle__lines"></span>
</button>
親愛的你的小提琴是我想要的，但是當我在我的代碼我試圖就inot working..what是錯誤的 –
我已在你的code.see JS的小變化併爲'head__get-in-touch-wrap'類添加'display：inline-block;'。 – Sachink
有可能你的屏幕不能滾動到50px而你的條件不是執行 – Sachink