Question

我的代码正在运行，但我必须手动输入每个案例，现在我正在尝试优化它以使其在任何情况下都能正常工作。但我不明白最好的方法

它的目标是知道我在页面中的位置，并在当前索引具有特定值时执行特定的操作：

这是我的JS代码：

var sections = $('.section'),
scroll,

offset = [],

currentIndex = 0;


for (var i = 0; i < sections.length; i++) {
  offset.push(sections[i].offsetTop)
}



// console.log(offset) -> [0, 807, 1704, 2601, 3498, 4395]



window.onscroll = function(){
  scroll = window.scrollY
  if(scroll > offset[0] && scroll < offset[1]){
    currentIndex = 1
    console.log(currentIndex)
  }
  if(scroll > offset[1] && scroll < offset[2]){
    currentIndex = 2
    console.log(currentIndex)
  }
  if(scroll > offset[2] && scroll < offset[3]){
    currentIndex = 3
    console.log(currentIndex)
  }
  if(scroll > offset[3] && scroll < offset[4]){
    currentIndex = 4
    console.log(currentIndex)
  }
  if(scroll > offset[4] && scroll < offset[5]){
    currentIndex = 5
    console.log(currentIndex)
  }
  if(scroll >= offset[5]){
    currentIndex = 6
    console.log(currentIndex);
  }
}

这是我的HTML：

<header class="section header"></header>
<section class="section sectionWhite"></section>
<section class="section"></section>
<section class="section sectionWhite"></section>
<section class="section"></section>
<footer class="section header"></footer>

任何帮助都会非常感激！

Answer 1

既然您已经提到过想要手动编写所有案例，那么这样的事情可能是您感兴趣的。下面的方法适用于任何长度的偏移数组。

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>asd.zxc.qwe</groupId>
    <artifactId>nifi-project</artifactId>
    <packaging>nar</packaging>
    <version>1.0</version>

    <dependencies>
        <dependency>
            <groupId>com.datastax.cassandra</groupId>
            <artifactId>cassandra-driver-core</artifactId>
            <version>3.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.datastax.cassandra</groupId>
            <artifactId>cassandra-driver-mapping</artifactId>
            <version>3.3.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.datastax.cassandra/cassandra-driver-extras -->
        <dependency>
            <groupId>com.datastax.cassandra</groupId>
            <artifactId>cassandra-driver-extras</artifactId>
            <version>3.1.0</version>
        </dependency>

        <dependency>
            <groupId>org.cassandraunit</groupId>
            <artifactId>cassandra-unit-spring</artifactId>
            <version>3.1.1.0</version>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.cassandraunit</groupId>
                    <artifactId>cassandra-unit</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.cassandraunit</groupId>
            <artifactId>cassandra-unit</artifactId>
            <classifier>shaded</classifier>
            <version>3.1.1.0</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.cassandraunit</groupId>
            <artifactId>cassandra-unit-spring</artifactId>
            <version>3.1.1.0</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.cassandraunit</groupId>
            <artifactId>cassandra-unit</artifactId>
            <version>3.3.0.2</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.apache.nifi</groupId>
            <artifactId>nifi-api</artifactId>
            <version>1.4.0</version>
        </dependency>
        <dependency>
            <groupId>org.apache.nifi</groupId>
            <artifactId>nifi-utils</artifactId>
            <version>1.4.0</version>
        </dependency>
        <dependency>
            <groupId>org.apache.nifi</groupId>
            <artifactId>nifi-mock</artifactId>
            <version>1.4.0</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.25</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.8.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.jcraft</groupId>
            <artifactId>jsch</artifactId>
            <version>0.1.54</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.6.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.nifi</groupId>
                <artifactId>nifi-nar-maven-plugin</artifactId>
                <version>1.0.0-incubating</version>
                <extensions>true</extensions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.15</version>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-shade-plugin</artifactId>
                <version>2.4.3</version>
                <executions>
                    <execution>
                        <phase>package</phase>
                        <goals>
                            <goal>
                    shade
                </goal>
                        </goals>
                    </execution>
                </executions>

                <configuration>
                    <minimizeJar>true</minimizeJar>
                    <shadedArtifactAttached>true</shadedArtifactAttached>
                    <shadedClassifierName>fat</shadedClassifierName>

                    <relocations>
                        <relocation>
                            <pattern>com.google</pattern>
                            <shadedPattern>shaded.guava</shadedPattern>
                            <includes>
                                <include>com.google.**</include>
                            </includes>

                            <excludes>
                                <exclude>com.google.common.base.Optional</exclude>
                                <exclude>com.google.common.base.Absent</exclude>
                                <exclude>com.google.common.base.Present</exclude>
                            </excludes>
                        </relocation>
                    </relocations>

                    <filters>
                        <filter>
                            <artifact>*:*</artifact>
                            <excludes>
                                <exclude>META-INF/*.SF</exclude>
                                <exclude>META-INF/*.DSA</exclude>
                                <exclude>META-INF/*.RSA</exclude>
                            </excludes>
                        </filter>
                    </filters>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Answer 2

我向朋友提出这个问题，对于那些也遇到同样问题的人来说，他的回答非常好：

function getOffsetIndex(value,offsetArray){

  for(var i = offsetArray.length-1; i >= 0; i--){
    if(value >= offsetArray[i]){
      return i;
    }
  }
  return null;
}

window.onscroll = function(){
  scroll = window.scrollY
  var offsetIndex = getOffsetIndex(scroll,offset);
  console.log(offsetIndex)
}

javascript滚动位置索引自动化

2 个答案: