javascript - 当另一个 Div 进入视口(viewport)时让 Div 出现

Question

我试图让#sidebar-nav div 在#sectionone 进入视口(viewport)时出现，然后在#sectionone 退出视口(viewport)时消失。我的问题是，是否可以在不使用“in-viewport”伪元素的情况下拥有此功能？ 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

纯 JavaScript 中的一种方法是使用 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 .

引用资料:

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