Question

具体来说，我想在用户滚动到特定区域时动态更改页面上粘滞和固定元素的颜色。我知道滚动上的像素高度是可能的，但是我不能使用这种技术，因为页面的背景由一堆图像组成。这会导致页面的像素高度在窗口调整大小时发生巨大变化，因为随着图像变宽而需要增加高度

我想可以通过一堆媒体电话来做到这一点，但我正努力避免这种情况，甚至不确定它是否会起作用。

我的主要目标是：将div滚动到视图中时，导航栏的样式（主要是颜色和字体粗细）和固定的页脚会发生变化。

也-这必须在Vanilla JS中。

如果有人有一个纯CSS解决方案，那也是可以接受的，我只是想不出一种可行的方法。

谢谢！

Answer 1

如何使用它？

这些是VanillaJS SpyScroll

https://github.com/cferdinandi/gumshoe

https://github.com/ederssouza/vanillajs-scrollspy

来自Codepen zchee / pen / ogzvZZ

HTML

.m4v

SCSS

import UIKit
import AVFoundation
import AVKit

class ViewController : UIViewController
{
    override func loadView()
    {
        let view = UIView()
        view.backgroundColor = .white

        self.view = view
    }
    var test = AVPlayerMediaSelectionCriteria()

    override func viewDidLoad()
    {
        super.viewDidLoad()
        guard let path = Bundle.main.path(forResource: "LebronTestProdNamed", ofType:"m4v")
            else
        {
            debugPrint("File not Found")
            return
        }

        let player = AVPlayer(url: URL(fileURLWithPath: path))
        player.appliesMediaSelectionCriteriaAutomatically = false

        let asset = AVAsset(url: URL(fileURLWithPath: path))
        let playerItem = AVPlayerItem(asset: asset)

        for characteristic in asset.availableMediaCharacteristicsWithMediaSelectionOptions {
            print("\(characteristic)")

            // Retrieve the AVMediaSelectionGroup for the specified characteristic.
            if let group = asset.mediaSelectionGroup(forMediaCharacteristic: characteristic) {
                // Print its options.
                for option in group.options {
                    print("  Option: \(option.displayName)")
                }
            }
        }

        // Create a group of the legible AVMediaCharacteristics (Subtitles)
        if let group = asset.mediaSelectionGroup(forMediaCharacteristic: AVMediaCharacteristic.legible) {
            // Set the locale identifier to the value of languageID to select the current language
            let locale = Locale(identifier: "en-EN")
            // Create an option group to hold the options in the group that match the locale
            let options =
                AVMediaSelectionGroup.mediaSelectionOptions(from: group.options, with: locale)
            // Assign the first option from options to the variable option
            if let option = options.first {
                // Select the option for the selected locale
                playerItem.select(option, in: group)
            }
        }



        let playerViewController = AVPlayerViewController()
        playerViewController.player = player
        playerViewController.player?.replaceCurrentItem(with: playerItem)

        addChild(playerViewController)
        playerViewController.view.frame = view.frame
        view.addSubview(playerViewController.view)
        playerViewController.didMove(toParent: self)
        playerViewController.player?.seek(to: CMTime(seconds: 0, preferredTimescale: 1))

    }
}

JS

  <div class="m1 menu">
    <div id="menu-center">
      <ul>
        <li><a class="active" href="#home">Home</a>

        </li>
        <li><a href="#portfolio">Portfolio</a>

        </li>
        <li><a href="#about">About</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
  </div>
  <div id="home" class="section"></div>
  <div id="portfolio" class="section"></div>
  <div id="about" class="section"></div>
  <div id="contact" class="section"></div>

当特定的div / element滚动到视图中时，是否可以更改元素的样式？

1 个答案: