It triggered the scroll event of js, but what I encountered was really unmovable. I initially thought it was FF, but I didn't expect that IE6 and IE7 had such an effect, so I had to be amazed at the magic.
I found the following magic code: only CSS can be used to achieve scrolling effect~~
#fixed{position:fixed;}
<div >Scroll</div>
After that, just this attribute is enough to roll, I really want to scold people. But it's not over yet. This only supports Firefox and IE7. I just said that IE6 is OK, but it's a bit complicated to implement IE6.
<!--[if IE]>
<style type="text/css">
* html #fixed{position:absolute;right:1px;top:expression_r(eval_r( + 500));}
* html{overflow:hidden;}
* html body{height:100%;overflow:auto;}
* html #fixed{right:17px;top:5em;}
* html #fixed{right :1px;top :expression_r(eval_r( + 500));}
</style>
<![endif]-->
I don't really see what this means. It seems to be CSS, but it should be considered a script! ? Maybe someone knows that I can tell you and share it.
Since my title is N methods to implement scrolling, there are definitely more than these two. It seems that there are other ways to write CSS, so I won't list them one by one. I mainly want to tell you the most commonly used JS implementation methods. My website uses a piece of code, which is also found online. However, there is a bad thing that is that it is relatively top, that is, if your web page is not high enough, you will not be able to pull the bottom. In fact, this situation will also occur when leaving a message on Baidu. I won't say more. I will post it first and take a look:
lastScrollY=0;
function heartBeat(){
var diffY;
if ( && )
diffY = ;
else if ()
diffY =
else
{}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=(percent);
else percent=(percent);
("lovexin12").=parseInt(("lovexin12").)+percent+"px";
(("lovexin12").)+percent+"px";
lastScrollY=lastScrollY+percent;
}
("heartBeat()",1);
If you are interested, you can change the above to the bottom, which will be much better.
I have been reading the js library recently. The jquery that I am interested in is still very good, so now, let’s post a code that uses jquery to implement scrolling, which feels much better than the above. But it is just an option, there is no need to do it, after all, jquery's code also has dozens of KB.
$(document).ready(function(){
if($. && $. == 6) {
();
}
});
FollowDiv = {
follow : function(){
$('#cssrain').css('position','absolute');
$(window).scroll(function(){
var f_top = $(window).scrollTop() + $(window).height() - $("#cssrain").height() - parseFloat($("#cssrain").css("borderTopWidth")) - parseFloat($("#cssrain").css("borderBottomWidth"));
$('#cssrain').css( 'top' , f_top );
});
}
}
Okay, that's all! ! If you don’t understand anything you can raise it! Only then will you make progress in discussion~! Welcome everyone to join my QQ group and learn and make progress together. Group number: 5678537
I found the following magic code: only CSS can be used to achieve scrolling effect~~
#fixed{position:fixed;}
<div >Scroll</div>
After that, just this attribute is enough to roll, I really want to scold people. But it's not over yet. This only supports Firefox and IE7. I just said that IE6 is OK, but it's a bit complicated to implement IE6.
Copy the codeThe code is as follows:
<!--[if IE]>
<style type="text/css">
* html #fixed{position:absolute;right:1px;top:expression_r(eval_r( + 500));}
* html{overflow:hidden;}
* html body{height:100%;overflow:auto;}
* html #fixed{right:17px;top:5em;}
* html #fixed{right :1px;top :expression_r(eval_r( + 500));}
</style>
<![endif]-->
I don't really see what this means. It seems to be CSS, but it should be considered a script! ? Maybe someone knows that I can tell you and share it.
Since my title is N methods to implement scrolling, there are definitely more than these two. It seems that there are other ways to write CSS, so I won't list them one by one. I mainly want to tell you the most commonly used JS implementation methods. My website uses a piece of code, which is also found online. However, there is a bad thing that is that it is relatively top, that is, if your web page is not high enough, you will not be able to pull the bottom. In fact, this situation will also occur when leaving a message on Baidu. I won't say more. I will post it first and take a look:
Copy the codeThe code is as follows:
lastScrollY=0;
function heartBeat(){
var diffY;
if ( && )
diffY = ;
else if ()
diffY =
else
{}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=(percent);
else percent=(percent);
("lovexin12").=parseInt(("lovexin12").)+percent+"px";
(("lovexin12").)+percent+"px";
lastScrollY=lastScrollY+percent;
}
("heartBeat()",1);
If you are interested, you can change the above to the bottom, which will be much better.
I have been reading the js library recently. The jquery that I am interested in is still very good, so now, let’s post a code that uses jquery to implement scrolling, which feels much better than the above. But it is just an option, there is no need to do it, after all, jquery's code also has dozens of KB.
Copy the codeThe code is as follows:
$(document).ready(function(){
if($. && $. == 6) {
();
}
});
FollowDiv = {
follow : function(){
$('#cssrain').css('position','absolute');
$(window).scroll(function(){
var f_top = $(window).scrollTop() + $(window).height() - $("#cssrain").height() - parseFloat($("#cssrain").css("borderTopWidth")) - parseFloat($("#cssrain").css("borderBottomWidth"));
$('#cssrain').css( 'top' , f_top );
});
}
}
Okay, that's all! ! If you don’t understand anything you can raise it! Only then will you make progress in discussion~! Welcome everyone to join my QQ group and learn and make progress together. Group number: 5678537