小编R B*_*nes的帖子

我正在尝试添加一个仅在进入视口时才保留在页面底部的粘性元素。这个想法是将元素放置在页面中间的某个位置，并且不会在用户访问页面时立即显示。

这是我到目前为止的进展：

div {
height: 300px;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  width: 100vw;
  background: yellow;
}

<div style="background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
<div class="sticky">Sticky Section</div>
<div style="background: green;"></div>
<div style="background: blue;"></div>

问题是我的代码与我想要它做的相反。该元素应该只超过其原始位置。

更改bottom: 0为top: calc(100vh - 30px)on.sticky似乎在桌面上工作正常，但我注意到它不适用于 iOS 上的 Safari。使用这个“黑客”解决方案，每当用户向上滚动时，底部栏的大小都会增加并迫使粘性元素跳跃。

我正在使用 Svelte 和 SendGrid 制作一个联系表单。这是一个基本的 app.svelte：

<script>
    import sgMail from '@sendgrid/mail';
    sgMail.setApiKey(import.meta.env.VITE_SENDGRID);

    function submitForm() {
        const msg = {
            to: 'test@example.com',
            from: 'test@example.com',
            subject: 'Sending with SendGrid is Fun',
            text: 'and easy to do anywhere, even with Node.js',
            html: '<strong>and easy to do anywhere, even with Node.js</strong>'
        };
        console.log('Form submitted');
        sgMail.send(msg);
    }
</script>

<form on:submit|preventDefault={submitForm}>
    <button type="submit">Submit</button>
</form>

submit尽管调用了该函数（它登录到控制台），但用户在表单上进行选择后，上面的代码不会发送电子邮件Form submitted。当我从函数外部移动所有代码时submitForm()，代码会在页面加载时执行，因此我知道这不是我的 API 密钥的问题。

我缺少什么建议吗？