向下滚动时淡出的标题 - 也适用于向上滚动

时间：2016-07-14 13:33:44

标签： javascript jquery html css

一旦你开始滚动，我有一个从透明变为蓝色的标题。再次到达页面顶部后，标题将返回透明状态。

但是现在它又回到了透明状态。可能很明显 - 但我能做些什么才能使蓝色渐变透明呢？

function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) {
        $('.navbar').addClass("navbar-inverse");
    } else {
        $('.navbar').removeClass("navbar-inverse");
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}
body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;


    a {
        color: #fff !important;
        font-size: 16px !important;

        &:hover {
            color: darken(@brand-primary,10%) !important;
            background-color: transparent !important;
        }
    }
}

.navbar.navbar-inverse {
    background: transparent;
    transition: all .5s linear;
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: #32404E;
}
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
    <div class="navbar navbar-alt navbar-fixed-top scrolled">
        <div class="row">
            <div class="col-md-offset-1 col-md-3">
                <div class="navbar-header">
                    <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
                        <img src="#" />
                    </a>
                </div>
            </div>
            <div class="col-md-offset-2 col-md-5">
                <div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
                    <ul class="nav navbar-nav navbar-right navbar-signup">
                        <li>
                            <a href="#" class="btn-gs">
                                <i class="fa fa-phone"></i>
                                Contact Us
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-right-alt">
                        <li>
                            <a href="#">Back</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
                        


		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>

2 个答案:

答案 0 :(得分：1)

这里的问题看起来是CSS过渡属性包含在您到达页面顶部时添加/删除的类中（“navbar-inverse”）。添加类时，转换将起作用，但删除它将使您所看到的透明度发生突然变化。

相反，尝试将转换放在单独的“.navbar”类中，并将其从“navbar-inverse”中删除，如下所示：

.navbar{
    transition: all .5s linear;
}


function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) {
        $('.navbar').addClass("navbar-inverse");
    } else {
        $('.navbar').removeClass("navbar-inverse");
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}
body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;


    a {
        color: #fff !important;
        font-size: 16px !important;

        &:hover {
            color: darken(@brand-primary,10%) !important;
            background-color: transparent !important;
        }
    }
}

.navbar{
    transition: all .5s linear;
}

.navbar.navbar-inverse {
    background: transparent;
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: #32404E;
}
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
    <div class="navbar navbar-alt navbar-fixed-top scrolled">
        <div class="row">
            <div class="col-md-offset-1 col-md-3">
                <div class="navbar-header">
                    <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
                        <img src="#" />
                    </a>
                </div>
            </div>
            <div class="col-md-offset-2 col-md-5">
                <div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
                    <ul class="nav navbar-nav navbar-right navbar-signup">
                        <li>
                            <a href="#" class="btn-gs">
                                <i class="fa fa-phone"></i>
                                Contact Us
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-right-alt">
                        <li>
                            <a href="#">Back</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
                        


		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>

答案 1 :(得分：1)

您可以将jQueryUI设为动画addClass() removeClass();

＆＃13;
＆＃13; 
function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) {
        $('.navbar').addClass("navbar-inverse", 1000, "easeInBack");
    } else {
        $('.navbar').removeClass("navbar-inverse", 1000, "easeInBack");
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}
＆＃13; 
body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;


    a {
        color: #fff !important;
        font-size: 16px !important;

        &:hover {
            color: darken(@brand-primary,10%) !important;
            background-color: transparent !important;
        }
    }
}

.navbar.navbar-inverse {
    background: transparent; 
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: #32404E;
}
＆＃13; 
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
      
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 

      
      
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
    <div class="navbar navbar-alt navbar-fixed-top scrolled">
        <div class="row">
            <div class="col-md-offset-1 col-md-3">
                <div class="navbar-header">
                    <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
                        <img src="#" />
                    </a>
                </div>
            </div>
            <div class="col-md-offset-2 col-md-5">
                <div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
                    <ul class="nav navbar-nav navbar-right navbar-signup">
                        <li>
                            <a href="#" class="btn-gs">
                                <i class="fa fa-phone"></i>
                                Contact Us
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-right-alt">
                        <li>
                            <a href="#">Back</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
                        


		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
            
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题