当另一个Div进入视口时出现Div

Question

I'm trying to have #sidebar-nav div appear when #sectionone enters the viewport, and then disappear when #sectionone exits the viewport. My question is, it possible to have this functionality without using the 'in-viewport' pseudo element? This is the JSFiddle I was working with.

 $(window).scroll(function() { if ($('#sectionone').is(':in-viewport')) { $('#sidebar-nav').show(); } else { $('#sidebar-nav').hide(); } }); 

 body { min-height:1000px; } #sectionone { position:relative; top:1000px; margin-bottom: 1000px; background:pink; } #sidebar-nav { position: fixed; top: 0; middle: 0; width: 100%; z-index: 999; padding: 8px; text-align: center; background: #fd0; display: none; } 

 <div id="sectionone">Waar</div> <div id="sidebar-nav">Sticky</div> 

Answer 1

One approach in plain JavaScript, though this does require an up-to-date browser, is to use the IntersectionObserver() API:

// the callback function to be provided to the IntersectionObserver;
// entries: an Array of IntersectionObserverEntries,
// o: a reference to the options Object passed to the IntersectionObserver:
function toggle(entries, o) {

  // finding the relevant element:
  document.getElementById('one')
    // updating its class-name, adding the 'inViewport' class
    // if entries[0].isIntersecting is true (the observed
    // element is in the viewport) or removing the class if
    // entries[0].isIntersecting is false (the observed element
    // is not in the viewport):
    .classList.toggle('inViewport', entries[0].isIntersecting);
}

// initialising the IntersectionObserver, and assigning the
// handler function:
let observer = new IntersectionObserver(toggle);

// specifying which element the IntersectionObserver should
// observe:
observer.observe(document.querySelector('#two'));

 function toggle(entries, o) { document.getElementById('one') .classList.toggle('inViewport', entries[0].isIntersecting); } let observer = new IntersectionObserver(toggle); observer.observe(document.querySelector('#two')); 

 *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } #one { position: sticky; left: 0; top: 0; width: 5em; height: 2em; line-height: 2em; transition: background-color 0.5s linear; background-color: #fff; } ul { margin-left: 6em; list-style-type: none; } li { line-height: 2; background-color: transparent; transition: background-color 0.5s linear; } #one.inViewport { background-color: #f90; } #one.inViewport+ul #two { background-color: #f90; } 

 <div class="wrapper"> <div id="one">Sticky</div> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> <li>item 21</li> <li>item 22</li> <li>item 23</li> <li>item 24</li> <li>item 25</li> <li>item 26</li> <li>item 27</li> <li>item 28</li> <li>item 29</li> <li>item 30</li> <li>item 31</li> <li>item 32</li> <li>item 33</li> <li>item 34</li> <li>item 35</li> <li>item 36</li> <li>item 37</li> <li>item 38</li> <li>item 39</li> <li>item 40</li> <li>item 41</li> <li>item 42</li> <li>item 43</li> <li>item 44</li> <li>item 45</li> <li>item 46</li> <li>item 47</li> <li>item 48</li> <li>item 49</li> <li>item 50</li> <li>item 51</li> <li>item 52</li> <li>item 53</li> <li>item 54</li> <li>item 55</li> <li>item 56</li> <li>item 57</li> <li>item 58</li> <li>item 59</li> <li>item 60</li> <li>item 61</li> <li>item 62</li> <li>item 63</li> <li>item 64</li> <li>item 65</li> <li>item 66</li> <li>item 67</li> <li>item 68</li> <li>item 69</li> <li>item 70</li> <li>item 71</li> <li>item 72</li> <li>item 73</li> <li>item 74</li> <li>item 75</li> <li>item 76</li> <li>item 77</li> <li>item 78</li> <li>item 79</li> <li>item 80</li> <li>item 81</li> <li>item 82</li> <li>item 83</li> <li>item 84</li> <li>item 85</li> <li>item 86</li> <li>item 87</li> <li>item 88</li> <li>item 89</li> <li>item 90</li> <li>item 91</li> <li>item 92</li> <li>item 93</li> <li>item 94</li> <li>item 95</li> <li>item 96</li> <li>item 97</li> <li>item 98</li> <li>item 99</li> <li id="two">item 100</li> <li>item 101</li> <li>item 102</li> <li>item 103</li> <li>item 104</li> <li>item 105</li> <li>item 106</li> <li>item 107</li> <li>item 108</li> <li>item 109</li> <li>item 110</li> <li>item 111</li> <li>item 112</li> <li>item 113</li> <li>item 114</li> <li>item 115</li> <li>item 116</li> <li>item 117</li> <li>item 118</li> <li>item 119</li> <li>item 120</li> <li>item 121</li> <li>item 122</li> <li>item 123</li> <li>item 124</li> <li>item 125</li> <li>item 126</li> <li>item 127</li> <li>item 128</li> <li>item 129</li> <li>item 130</li> <li>item 131</li> <li>item 132</li> <li>item 133</li> <li>item 134</li> <li>item 135</li> <li>item 136</li> <li>item 137</li> <li>item 138</li> <li>item 139</li> <li>item 140</li> <li>item 141</li> <li>item 142</li> <li>item 143</li> <li>item 144</li> <li>item 145</li> <li>item 146</li> <li>item 147</li> <li>item 148</li> <li>item 149</li> <li>item 150</li> <li>item 151</li> <li>item 152</li> <li>item 153</li> <li>item 154</li> <li>item 155</li> <li>item 156</li> <li>item 157</li> <li>item 158</li> <li>item 159</li> <li>item 160</li> <li>item 161</li> <li>item 162</li> <li>item 163</li> <li>item 164</li> <li>item 165</li> <li>item 166</li> <li>item 167</li> <li>item 168</li> <li>item 169</li> <li>item 170</li> <li>item 171</li> <li>item 172</li> <li>item 173</li> <li>item 174</li> <li>item 175</li> <li>item 176</li> <li>item 177</li> <li>item 178</li> <li>item 179</li> <li>item 180</li> <li>item 181</li> <li>item 182</li> <li>item 183</li> <li>item 184</li> <li>item 185</li> <li>item 186</li> <li>item 187</li> <li>item 188</li> <li>item 189</li> <li>item 190</li> <li>item 191</li> <li>item 192</li> <li>item 193</li> <li>item 194</li> <li>item 195</li> <li>item 196</li> <li>item 197</li> <li>item 198</li> <li>item 199</li> <li>item 200</li> </ul> </div> 

JS Fiddle demo .

References:

• document.querySelector() .
• Element.classList API .
• IntersectionObserver() API .
• IntesectionObserverEntry .