如何在滚动条旁边“粘贴”图标并使其始终存在（即使滚动）？

Question

我一直在尝试将图标放在我的反应页面中滚动条的旁边。现在我找不到按照我想要的方式正确对齐项目的方法。

现在这是我得到的：

现在红色方块是我的图标所在的位置，绿色是我想要的位置。此外，我希望能够滚动页面，图标仍然在那里（所以我希望它一直在那里）。这将是我的过滤输入。

这是我返回的组件：

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

import Form from 'react-validation/build/form';

import ArticleService from '../../services/article.service';
//import Filter from '../Filter/Filter';
import {
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
} from 'mdbreact';

import { Pagination } from 'semantic-ui-react';
import numeral from 'numeral';

const Dashboard = () => {

 .....

  return (
    <div>
      {loading ? (
        <div className='text-white'> 
          <div className='float-right'> //here is where I'm using the icon 
            <MDBDropdown dropleft>
              <MDBDropdownToggle caret color='#ffffff'>
                <i className='fas fa-chevron-left'></i>
              </MDBDropdownToggle>
              <MDBDropdownMenu>
                <MDBDropdownItem>
                  <p>Input1</p>
                </MDBDropdownItem>
                <MDBDropdownItem>
                  <p>Input2</p>
                </MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </div>
          <div className='container'>
            {renderHeader()}
            <div className='text-center'>
              <Form className='input-group mb-3' onSubmit={addFilter}>
                {' '}
                <input
                  type='text'
                  className='form-control text-center transparent-input'
                  placeholder='Unesite željenu lokaciju na području grada Sarajeva npr. Dobrinja'
                  aria-label='Unesite željenu lokaciju na području grada Sarajeva npr. Dobrinja'
                  aria-describedby='basic-addon2'
                  value={location}
                  onChange={onChangeLocation}
                />
                <div className='input-group-append'>
                  <button
                    className='btn btn-grad rounded'
                    onClick={submitNameFilter}
                  >
                    <i className='fas fa-search-location'></i>
                  </button>
                </div>
              </Form>
            </div>
            <div className='d-flex'>
              <div className='row row-cols-1 row-cols-md-3 custom-p'>
                {content.map(card)}
              </div>
              <div></div>
            </div>
          </div>
          <div className='mb-5 mt-5 text-center'>
            <Pagination
              totalPages={Math.ceil(total / 15)}
              onPageChange={(e, d) => {
                parsedUrl.set('page', d.activePage);
                const pushPageToURL = parsedUrl.toString();
                setPage(d.activePage);
                window.history.pushState(null, null, `?${pushPageToURL}`);
              }}
              activePage={page}
            />
          </div>
        </div>
      ) : (
        <div className='spinner-border text-primary text-center' role='status'>
          <span className='sr-only'>Loading...</span>
        </div>
      )}
    </div>
  );
};

export default Dashboard;

请注意，我使用的是引导程序。

Answer 1

您必须使用fixed 位置，在引导程序中变为position-fixed || fixed-top.

纯css示例：

#icon {
  position: fixed;
  top: 0;
}

看看这个例子： https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/