固定背景滚动布局

所属分类:UI-滚动,背景

 4585  58  查看评论 (2)
固定背景滚动布局 ie兼容8

实现代码

HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
    <nav>
        <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
        <a href="#fbsection2">Section 2</a>
        <a href="#fbsection3">Section 3</a>
        <a href="#fbsection4">Section 4</a>
        <a href="#fbsection5">Section 5</a>
    </nav>
        <section id="fbsection1"></section>
        <section id="fbsection2"></section>
        <section id="fbsection3"></section>
        <section id="fbsection4"></section>
        <section id="fbsection5"></section>
</div>

CSS

/* Set all parents to full height */
html,body,.container,.cbp-fbscroller,.cbp-fbscroller section {
	height:100%;
}
/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
	position:fixed;
	z-index:9999;
	right:100px;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}
.cbp-fbscroller > nav a {
	display:block;
	position:relative;
	color:transparent;
	height:50px;
}
.cbp-fbscroller > nav a:after {
	content:'';
	position:absolute;
	width:24px;
	height:24px;
	border-radius:50%;
	border:4px solid #fff;
}
.cbp-fbscroller > nav a:hover:after {
	background:rgba(255,255,255,0.6);
}
.cbp-fbscroller > nav a.cbp-fbcurrent:after {
	background:#fff;
}
/* background-attachment does the trick */
.cbp-fbscroller section {
	position:relative;
	background-position:top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
}
#fbsection1 {
	background-image:url(../images/1.jpg);
}
#fbsection2 {
	background-image:url(../images/2.jpg);
}
#fbsection3 {
	background-image:url(../images/3.jpg);
}
#fbsection4 {
	background-image:url(../images/4.jpg);
}
#fbsection5 {
	background-image:url(../images/5.jpg);

JavaScript

var cbpFixedScrollLayout = (function() {
	// cache and initialize some values
	var config = {
		// the cbp-fbscroller′s sections
		$sections : $( '#cbp-fbscroller > section' ),
		// the navigation links
		$navlinks : $( '#cbp-fbscroller > nav:first > a' ),
		// index of current link / section
		currentLink : 0,
		// the body element
		$body : $( 'html, body' ),
		// the body animation speed
		animspeed : 650,
		// the body animation easing (jquery easing)
		animeasing : 'easeInOutExpo'
	};
	function init() {

		// click on a navigation link: the body is scrolled to the position of the respective section
		config.$navlinks.on( 'click', function() {
			scrollAnim( config.$sections.eq( $( this ).index() ).offset().top );
			return false;
		} );

		// 2 waypoints defined:
		// First one when we scroll down: the current navigation link gets updated. 
		// A `new section′ is reached when it occupies more than 70% of the viewport
		// Second one when we scroll up: the current navigation link gets updated. 
		// A `new section′ is reached when it occupies more than 70% of the viewport
		config.$sections.waypoint( function( direction ) {
			if( direction === 'down' ) { changeNav( $( this ) ); }
		}, { offset: '30%' } ).waypoint( function( direction ) {
			if( direction === 'up' ) { changeNav( $( this ) ); }
		}, { offset: '-30%' } );

		// on window resize: the body is scrolled to the position of the current section
		$( window ).on( 'debouncedresize', function() {
			scrollAnim( config.$sections.eq( config.currentLink ).offset().top );
		} );
		
	}
	// update the current navigation link
	function changeNav( $section ) {
		config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' );
		config.currentLink = $section.index( 'section' );
		config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' );
	}

	// function to scroll / animate the body
	function scrollAnim( top ) {
		config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing );
	}
	return { init : init };

})();


相关插件-滚动,背景

jquery动态阴影

jquery动态滚动的阴影,会根据图像位置变换阴影角度
  滚动
 13650  33

jQuery自定义滚动条插件-Easy Scroll

Easy Scroll这是一个非常简单的jQuery自定义滚动条插件、 易于使用的脚本。下载后可以立即使用。
  滚动
 59666  51

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 14702  122

仿股市表格实时轮播

这是一款简单的不需要任何外部插件的轮播效果图
  滚动
 7959  74

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    Eason~ 0
    2017/9/18 11:07:31

    这个怎么实现的,有什么思路吗

        就叫成长吧!0
        2017/11/6 12:45:16

        background-attachment:fixed;

        试下效果就知道怎么实现了。- -.

    回复
取消回复