在位置上没有移动的对象：已修复

时间：2017-12-07 21:14:17

标签： javascript jquery html html5 css3

我有点在我的设计右侧建立一个固定的导航栏，位置固定，我使用jquery来切换第一类display：none，另一个使用display：block。

当代码滚过时说300px高度侧边栏显示它是否隐藏。

但是当它滚动过去说300px高时，侧边栏会自动显示而没有过渡效果，我已经为我的设计生成了过渡样式但似乎没有用，请我需要帮助。

这是我的代码

＆＃13;
＆＃13; 
jQuery(document).ready(function($){
	// browser window scroll (in pixels) after which the "back to top" link is shown
	var offset = 300,
		//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
		offset_opacity = 1200,
		//duration of the top scrolling animation (in ms)
		scroll_top_duration = 700,
		//grab the "back to top" link
		$back_to_top = $('.even-more-sq-rt');

	//hide or show the "back to top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('even-more-post-visible') : $back_to_top.removeClass('even-more-post-visible');

	});


});
＆＃13; 
   
.even-more-sq-rt {
    width: 300px !important;
    max-height: 350px;
    position: fixed;
    z-index: 999;
    right: 0px;
    bottom: 20px;
    top: 10px;
    background: white;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 0px;
    margin-bottom: 60px;
    padding:  20px;
    border: 1px solid #ddd;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(221, 221, 221);
    border-right: 0px;
}
        
        
.even-more-sq-rt-postmeta h3 {
    font-size: 17px;
    padding-top: 10px;
}
        
        
.even-more-sq-rt-thumb.img-responsive {
    height: 145px;
    overflow: hidden;
}

.even-more-sq-rt {
    text-align: center;
}

.close-btn {
    position: absolute;
    right: 0;
    top: 0;
    background: #333;
    border: 0px;
    padding: 3px 11px;
    color: #fff;
}

.even-more-sq-rt h3 {
    margin-top: 0px;
    font-size: 17px;
}
        
.even-more-sq-rt {
    display: none;
    transition: all 12s ease-in 5s;
}

.even-more-post-visible {
    display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>

<div class="even-more-sq-rt">
           <h3>Trending Now</h3>
                    <button class="close-btn">X</button>
                <div class="even-more-sq-rt-inner clearfix">
                    
                    <div class="even-more-sq-rt-thumb img-responsive">
                        <img src="http://placehold.it/259x145">
                    </div>
                    <div class="even-more-sq-rt-postmeta">
                        <h3><a href="#"> when there is no more words to say : silence is golden</a></h3>
                    </div>
                </div>
            </div>
＆＃13;
＆＃13;
＆＃13;

这是我想要添加的过渡：

-webkit-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
-moz-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
-o-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
-webkit-transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
-moz-transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
-o-transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);
transition-timing-function: cubic-bezier(0.265, 0.365, 0.26, 0.865);

1 个答案:

答案 0 :(得分：0)

你在寻找什么样的东西，我唯一能做的就是添加一个css3动画并将其添加到更加明显的后期风格中。

jQuery(document).ready(function($){
	// browser window scroll (in pixels) after which the "back to top" link is shown
	var offset = 300,
		//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
		offset_opacity = 1200,
		//duration of the top scrolling animation (in ms)
		scroll_top_duration = 700,
		//grab the "back to top" link
		$back_to_top = $('.even-more-sq-rt');

	//hide or show the "back to top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('even-more-post-visible') : $back_to_top.removeClass('even-more-post-visible');

	});


});
.even-more-sq-rt {
    width: 300px !important;
    max-height: 350px;
    position: fixed;
    z-index: 999;
    right: 0px;
    bottom: 20px;
    top: 10px;
    background: white;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 0px;
    margin-bottom: 60px;
    padding:  20px;
    border: 1px solid #ddd;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(221, 221, 221);
    border-right: 0px;
}
        
        
.even-more-sq-rt-postmeta h3 {
    font-size: 17px;
    padding-top: 10px;
}
        
        
.even-more-sq-rt-thumb.img-responsive {
    height: 145px;
    overflow: hidden;
}

.even-more-sq-rt {
    text-align: center;
}

.close-btn {
    position: absolute;
    right: 0;
    top: 0;
    background: #333;
    border: 0px;
    padding: 3px 11px;
    color: #fff;
}

.even-more-sq-rt h3 {
    margin-top: 0px;
    font-size: 17px;
}
        
.even-more-sq-rt {
    display: none;
    transition: all 12s ease-in 5s;
}

.even-more-post-visible {
    display: block;
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>
<h3> some space </h3>

<div class="even-more-sq-rt">
           <h3>Trending Now</h3>
                    <button class="close-btn">X</button>
                <div class="even-more-sq-rt-inner clearfix">
                    
                    <div class="even-more-sq-rt-thumb img-responsive">
                        <img src="http://placehold.it/259x145">
                    </div>
                    <div class="even-more-sq-rt-postmeta">
                        <h3><a href="#"> when there is no more words to say : silence is golden</a></h3>
                    </div>
                </div>
            </div>

相关问题
最新问题