254 lines
7.1 KiB
HTML
254 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>仿淘宝下拉固定</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
width: 100%;
|
|
background: #8d8d8d;
|
|
}
|
|
.box {
|
|
width: 100%;
|
|
height: 80px;
|
|
background: #000;
|
|
}
|
|
.box_fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onscroll="scrollFixed()">
|
|
<ul>
|
|
<li><a href="">1</a></li>
|
|
<li><a href="">2</a></li>
|
|
<li><a href="">3</a></li>
|
|
<li><a href="">4</a></li>
|
|
<li><a href="">5</a></li>
|
|
<li><a href="">6</a></li>
|
|
<li><a href="">7</a></li>
|
|
<div class="box">
|
|
|
|
</div>
|
|
<li><a href="">8</a></li>
|
|
<li><a href="">9</a></li>
|
|
<li><a href="">10</a></li>
|
|
<li><a href="">11</a></li>
|
|
<li><a href="">12</a></li>
|
|
<li><a href="">13</a></li>
|
|
<li><a href="">14</a></li>
|
|
<li><a href="">15</a></li>
|
|
<li><a href="">16</a></li>
|
|
<li><a href="">17</a></li>
|
|
<li><a href="">18</a></li>
|
|
<li><a href="">19</a></li>
|
|
<li><a href="">20</a></li>
|
|
<li><a href="">21</a></li>
|
|
<li><a href="">22</a></li>
|
|
<li><a href="">23</a></li>
|
|
<li><a href="">24</a></li>
|
|
<li><a href="">25</a></li>
|
|
<li><a href="">26</a></li>
|
|
<li><a href="">27</a></li>
|
|
<li><a href="">28</a></li>
|
|
<li><a href="">29</a></li>
|
|
<li><a href="">30</a></li>
|
|
<li><a href="">31</a></li>
|
|
<li><a href="">32</a></li>
|
|
<li><a href="">33</a></li>
|
|
<li><a href="">34</a></li>
|
|
<li><a href="">35</a></li>
|
|
<li><a href="">36</a></li>
|
|
<li><a href="">37</a></li>
|
|
<li><a href="">38</a></li>
|
|
<li><a href="">39</a></li>
|
|
<li><a href="">40</a></li>
|
|
<li><a href="">41</a></li>
|
|
<li><a href="">42</a></li>
|
|
<li><a href="">43</a></li>
|
|
<li><a href="">44</a></li>
|
|
<li><a href="">45</a></li>
|
|
<li><a href="">46</a></li>
|
|
<li><a href="">47</a></li>
|
|
<li><a href="">48</a></li>
|
|
<li><a href="">49</a></li>
|
|
<li><a href="">50</a></li>
|
|
<li><a href="">51</a></li>
|
|
<li><a href="">52</a></li>
|
|
<li><a href="">53</a></li>
|
|
<li><a href="">54</a></li>
|
|
<li><a href="">55</a></li>
|
|
<li><a href="">56</a></li>
|
|
<li><a href="">57</a></li>
|
|
<li><a href="">58</a></li>
|
|
<li><a href="">59</a></li>
|
|
<li><a href="">60</a></li>
|
|
<li><a href="">61</a></li>
|
|
<li><a href="">62</a></li>
|
|
<li><a href="">63</a></li>
|
|
<li><a href="">64</a></li>
|
|
<li><a href="">65</a></li>
|
|
<li><a href="">66</a></li>
|
|
<li><a href="">67</a></li>
|
|
<li><a href="">68</a></li>
|
|
<li><a href="">69</a></li>
|
|
<li><a href="">70</a></li>
|
|
<li><a href="">71</a></li>
|
|
<li><a href="">72</a></li>
|
|
<li><a href="">73</a></li>
|
|
<li><a href="">74</a></li>
|
|
<li><a href="">75</a></li>
|
|
<li><a href="">76</a></li>
|
|
<li><a href="">77</a></li>
|
|
<li><a href="">78</a></li>
|
|
<li><a href="">79</a></li>
|
|
<li><a href="">80</a></li>
|
|
<li><a href="">81</a></li>
|
|
<li><a href="">82</a></li>
|
|
<li><a href="">83</a></li>
|
|
<li><a href="">84</a></li>
|
|
<li><a href="">85</a></li>
|
|
<li><a href="">86</a></li>
|
|
<li><a href="">87</a></li>
|
|
<li><a href="">88</a></li>
|
|
<li><a href="">89</a></li>
|
|
<li><a href="">90</a></li>
|
|
<li><a href="">91</a></li>
|
|
<li><a href="">92</a></li>
|
|
<li><a href="">93</a></li>
|
|
<li><a href="">94</a></li>
|
|
<li><a href="">95</a></li>
|
|
<li><a href="">96</a></li>
|
|
<li><a href="">97</a></li>
|
|
<li><a href="">98</a></li>
|
|
<li><a href="">99</a></li>
|
|
<li><a href="">100</a></li>
|
|
<li><a href="">101</a></li>
|
|
<li><a href="">102</a></li>
|
|
<li><a href="">103</a></li>
|
|
<li><a href="">104</a></li>
|
|
<li><a href="">105</a></li>
|
|
<li><a href="">106</a></li>
|
|
<li><a href="">107</a></li>
|
|
<li><a href="">108</a></li>
|
|
<li><a href="">109</a></li>
|
|
<li><a href="">110</a></li>
|
|
<li><a href="">111</a></li>
|
|
<li><a href="">112</a></li>
|
|
<li><a href="">113</a></li>
|
|
<li><a href="">114</a></li>
|
|
<li><a href="">115</a></li>
|
|
<li><a href="">116</a></li>
|
|
<li><a href="">117</a></li>
|
|
<li><a href="">118</a></li>
|
|
<li><a href="">119</a></li>
|
|
<li><a href="">120</a></li>
|
|
<li><a href="">121</a></li>
|
|
<li><a href="">122</a></li>
|
|
<li><a href="">123</a></li>
|
|
<li><a href="">124</a></li>
|
|
<li><a href="">125</a></li>
|
|
<li><a href="">126</a></li>
|
|
<li><a href="">127</a></li>
|
|
<li><a href="">128</a></li>
|
|
<li><a href="">129</a></li>
|
|
<li><a href="">130</a></li>
|
|
<li><a href="">131</a></li>
|
|
<li><a href="">132</a></li>
|
|
<li><a href="">133</a></li>
|
|
<li><a href="">134</a></li>
|
|
<li><a href="">135</a></li>
|
|
<li><a href="">136</a></li>
|
|
<li><a href="">137</a></li>
|
|
<li><a href="">138</a></li>
|
|
<li><a href="">139</a></li>
|
|
<li><a href="">140</a></li>
|
|
<li><a href="">141</a></li>
|
|
<li><a href="">142</a></li>
|
|
<li><a href="">143</a></li>
|
|
<li><a href="">144</a></li>
|
|
<li><a href="">145</a></li>
|
|
<li><a href="">146</a></li>
|
|
<li><a href="">147</a></li>
|
|
<li><a href="">148</a></li>
|
|
<li><a href="">149</a></li>
|
|
<li><a href="">150</a></li>
|
|
<li><a href="">151</a></li>
|
|
<li><a href="">152</a></li>
|
|
<li><a href="">153</a></li>
|
|
<li><a href="">154</a></li>
|
|
<li><a href="">155</a></li>
|
|
<li><a href="">156</a></li>
|
|
<li><a href="">157</a></li>
|
|
<li><a href="">158</a></li>
|
|
<li><a href="">159</a></li>
|
|
<li><a href="">160</a></li>
|
|
<li><a href="">161</a></li>
|
|
<li><a href="">162</a></li>
|
|
<li><a href="">163</a></li>
|
|
<li><a href="">164</a></li>
|
|
<li><a href="">165</a></li>
|
|
<li><a href="">166</a></li>
|
|
<li><a href="">167</a></li>
|
|
<li><a href="">168</a></li>
|
|
<li><a href="">169</a></li>
|
|
<li><a href="">170</a></li>
|
|
<li><a href="">171</a></li>
|
|
<li><a href="">172</a></li>
|
|
<li><a href="">173</a></li>
|
|
<li><a href="">174</a></li>
|
|
<li><a href="">175</a></li>
|
|
<li><a href="">176</a></li>
|
|
<li><a href="">177</a></li>
|
|
<li><a href="">178</a></li>
|
|
<li><a href="">179</a></li>
|
|
<li><a href="">180</a></li>
|
|
<li><a href="">181</a></li>
|
|
<li><a href="">182</a></li>
|
|
<li><a href="">183</a></li>
|
|
<li><a href="">184</a></li>
|
|
<li><a href="">185</a></li>
|
|
<li><a href="">186</a></li>
|
|
<li><a href="">187</a></li>
|
|
<li><a href="">188</a></li>
|
|
<li><a href="">189</a></li>
|
|
<li><a href="">190</a></li>
|
|
<li><a href="">191</a></li>
|
|
<li><a href="">192</a></li>
|
|
<li><a href="">193</a></li>
|
|
<li><a href="">194</a></li>
|
|
<li><a href="">195</a></li>
|
|
<li><a href="">196</a></li>
|
|
<li><a href="">197</a></li>
|
|
<li><a href="">198</a></li>
|
|
<li><a href="">199</a></li>
|
|
<li><a href="">200</a></li>
|
|
</ul>
|
|
</body>
|
|
|
|
<script>
|
|
var box = document.getElementsByClassName("box")[0];
|
|
|
|
function scrollFixed () {
|
|
// var offset = 154,
|
|
// Yoffset = window.pageYOffset;
|
|
// if(Yoffset >= offset) {
|
|
// box.className = "box box_fixed"
|
|
// }else {
|
|
// box.className = "box"
|
|
// }
|
|
|
|
// 简写
|
|
window.pageYOffset >= 154 ? box.className = "box box_fixed" : box.className = "box"
|
|
|
|
|
|
}
|
|
</script>
|
|
</html> |