html随着页面滑动,用HTML和css和js怎样实现随着页面滑动?

完全用CSS控制就可以了,页面在滚动,给这个DIV设置position:fixed;那么页面不管怎么滚动,这个DIV是中在顶端

解决方案二:

显示合作div absolute定位,判断滚动到div位置的时候设置position为fixed,同时设置top为0

我是菜单,我到页头会固定

$(function () {

var ie6 = /msie 6/i.test(navigator.userAgent)

, dv = $('#fixedMenu'), st;

dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离

$(window).scroll(function () {

st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);

if (st >= parseInt(dv.attr('otop'))) {

if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果

dv.css({ position: 'absolute', top: st });

}

else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });

} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });

});

});

解决方案三:

对页面y轴偏移量进行判断,如果大于某个值(具体情况具体应对),克隆原来的层,设置新的id,新的id意味着新的css样式:position:fixed,然后隐藏原来的层,添加克隆的层; 否则,即向上滑动到一定位置时,remove克隆的层,显示隐藏的层,达到目的~代码仅供参考。。。

$(window).scroll(function(){

if(window.pageYOffset>108){

if($("#topbar").length == 0){

var x=$("#wrap_most_used_bookmark").clone();

x.attr("id","topbar");

$("body").append(x);

$("#return_top").fadeIn();

}

}

else{

$("#topbar").remove();

$("#return_top").fadeOut();

}

});

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的拟态滑动登录注册页面的样式和代码: HTML代码: ``` <div class="container"> <div class="form-container sign-up-container"> <form action="#"> <h1>Create Account</h1> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <button>Sign Up</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>Sign in</h1> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <a href="#">Forgot your password?</a> <button>Sign In</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>Welcome Back!</h1> <p>To keep connected with us please login with your personal info</p> <button class="ghost" id="signIn">Sign In</button> </div> <div class="overlay-panel overlay-right"> <h1>Hello, Friend!</h1> <p>Enter your personal details and start journey with us</p> <button class="ghost" id="signUp">Sign Up</button> </div> </div> </div> </div> ``` CSS代码: ``` @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); * { box-sizing: border-box; } body { background-color: #f6f5f7; font-family: 'Montserrat', sans-serif; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); position: relative; overflow: hidden; width: 100%; max-width: 1000px; min-height: 560px; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay { background: #FF416C; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-panel { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; height: 100%; width: 50%; text-align: center; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } .form-container.sign-up-container { transform: translateX(100%); opacity: 1; z-index: 2; } .form-container.sign-in-container { transform: translateX(0%); z-index: 1; } .form { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; } form input { background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; border-radius: 20px; border-bottom: 2px solid #fff; font-family: 'Montserrat', sans-serif; font-weight: 500; } form input:focus { outline: none; border-bottom: 2px solid #FF4B2B; } form button { background-color: #FF4B2B; color: #fff; border: none; border-radius: 20px; padding: 12px 20px; margin: 20px 0; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease-in-out; } form button:hover { background-color: #fff; color: #FF4B2B; border: 1px solid #FF4B2B; } form button.ghost { background-color: transparent; border-color: #fff; } form a { color: #8e8e8e; font-size: 14px; text-decoration: none; } form a:hover { text-decoration: underline; } .overlay-right .ghost { background-color: #fff; border-color: #fff; color: #FF4B2B; } .overlay-right .ghost:hover { background-color: #FF4B2B; color: #fff; } .overlay-right button { background-color: transparent; border-color: #fff; color: #fff; } .overlay-right button:hover { background-color: #fff; color: #FF4B2B; border-color: #fff; } ``` JavaScript代码: ``` const signUpButton = document.getElementById('signUp'); const signInButton = document.getElementById('signIn'); const container = document.getElementById('container'); signUpButton.addEventListener('click', () => { container.classList.add('right-panel-active'); }); signInButton.addEventListener('click', () => { container.classList.remove('right-panel-active'); }); ``` 以上代码实现了一个拟态滑动登录注册页面,其中包括两个表单(登录和注册),以及一个覆盖整个页面的背景和两个覆盖表单的覆盖层。通过点击“Sign Up”或“Sign In”按钮,可以在两个表单之间进行切换,同时覆盖层和背景也会相应地滑动切换。您可以根据需要进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值